پیشنمایش زنده
کد HTML
<div
class="flex flex-col gap-2 text-base bg-gray-50 text-gray-400 font-bold font-mono w-[400px] p-4 rounded-lg shadow-sm shadow-gray-400"
>
<div class="flex justify-between items-center">
<div class="flex items-center gap-2">
<svg
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
class="w-[20px] fill-gray-400"
>
<path
d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
></path>
</svg>
<span>How was your experience today?</span>
</div>
<button class="hover:bg-gray-200 rounded-full p-1 duration-300">
<svg
viewBox="0 0 384 512"
xmlns="http://www.w3.org/2000/svg"
class="w-[15px] fill-gray-400"
>
<path
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
></path>
</svg>
</button>
</div>
<hr class="my-2" />
<div class="flex gap-4">
<button
class="w-full bg-gray-100 p-2 rounded-md shadow-sm shadow-gray-400 hover:bg-gray-200 duration-300"
>
Good
</button>
<button
class="w-full bg-gray-100 p-2 rounded-md shadow-sm shadow-gray-400 hover:bg-gray-200 duration-300"
>
Excellent
</button>
<button
class="w-full bg-gray-100 p-2 rounded-md shadow-sm shadow-gray-400 hover:bg-gray-200 duration-300"
>
Fair
</button>
<button
class="w-full bg-gray-100 p-2 rounded-md shadow-sm shadow-gray-400 hover:bg-gray-200 duration-300"
>
Poor
</button>
</div>
</div>
کد CSS
.my-2{margin-top:0.5rem;margin-bottom:0.5rem}.flex{display:flex}.w-\[15px\]{width:15px}.w-\[20px\]{width:20px}.w-\[400px\]{width:400px}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.fill-gray-400{fill:#9ca3af}.p-1{padding:0.25rem}.p-2{padding:0.5rem}.p-4{padding:1rem}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-gray-400{--tw-shadow-color:#9ca3af;--tw-shadow:var(--tw-shadow-colored)}.duration-300{transition-duration:300ms}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}