由底部填滿按鈕效果
#form-007-hospital-reserve
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.content {
@apply max-w-md w-full space-y-5;
}
.spy-one {
@apply space-y-1;
}
.title {
@apply font-bold text-lg;
}
.input-content {
@apply border-t-2 border-b-4 border-x-2 border-slate-200 px-4 py-2.5 flex rounded-full;
}
.input-title {
@apply w-full text-xl;
}
.svg {
@apply w-7 h-7 bg-gray-200 rounded-full flex justify-center items-center;
}
.two-content {
@apply flex space-x-5;
}
.two-spy-one {
@apply space-y-1 w-full;
}
</style>
<body class="min-h-svh flex items-center justify-center w-full">
<div class="content">
<div class="spy-one">
<p class="title">🤵Category</p>
<div class="input-content">
<p class="input-title">🐶Pets</p>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#000000">
<path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
</svg>
</div>
</div>
</div>
<div class="two-content">
<div class="two-spy-one">
<p class="title">📅Date</p>
<div class="input-content">
<p class="input-title">10/11/21</p>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#000000">
<path
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg>
</div>
</div>
</div>
<div class="two-spy-one">
<p class="title">⌚Time</p>
<div class="input-content">
<p class="input-title">6:00 pm</p>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#000000">
<path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
</svg>
</div>
</div>
</div>
</div>
<div class="spy-one">
<p class="title">🔔Reminders</p>
<div class="input-content">
<p class="input-title">At time of event</p>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#000000">
<path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
</svg>
</div>
</div>
</div>
<div class="spy-one">
<p class="title">🔁Repeat</p>
<div class="input-content">
<p class="input-title">None</p>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#000000">
<path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
</svg>
</div>
</div>
</div>
</div>
</body>
</html>