پیشنمایش زنده
کد HTML
<div class="grid grid-cols-6 gap-3 rounded-md bg-white p-3 shadow-md">
<h1 class="col-span-6 text-2xl font-bold capitalize text-slate-400">
feedback
</h1>
<textarea
class="col-span-6 min-h-28 resize-none bg-slate-100 p-2 outline-none ring-2 ring-slate-200 duration-300 placeholder:text-slate-400 focus:ring-slate-400 rounded-md text-slate-400"
placeholder="What's Your Feedback?"
></textarea>
<button
class="flex items-center justify-center bg-slate-100 p-2 ring-2 ring-slate-200 duration-300 focus:ring-slate-400 rounded-md"
>
<svg
viewBox="0 0 512 512"
height="20px"
xmlns="http://www.w3.org/2000/svg"
class="fill-slate-500"
>
<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 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zm40-89.3l0 0 0 0-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2 0 0 0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8l0 0 0 0zm160 0l0 0-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2 0 0 0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8l0 0 0 0 0 0z"
></path>
</svg>
</button>
<button
class="flex items-center justify-center bg-slate-100 p-2 ring-2 ring-slate-200 duration-300 focus:ring-slate-400 rounded-md"
>
<svg
viewBox="0 0 512 512"
height="20px"
xmlns="http://www.w3.org/2000/svg"
class="fill-slate-500"
>
<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 256zM174.6 384.1c-4.5 12.5-18.2 18.9-30.7 14.4s-18.9-18.2-14.4-30.7C146.9 319.4 198.9 288 256 288s109.1 31.4 126.6 79.9c4.5 12.5-2 26.2-14.4 30.7s-26.2-2-30.7-14.4C328.2 358.5 297.2 336 256 336s-72.2 22.5-81.4 48.1zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
></path>
</svg>
</button>
<hr class="col-span-2 border-none" />
<button
class="col-span-2 flex items-center justify-center bg-slate-100 p-2 ring-2 ring-slate-200 duration-300 hover:ring-slate-400 rounded-md"
>
<svg
viewBox="0 0 512 512"
height="20px"
xmlns="http://www.w3.org/2000/svg"
class="fill-slate-500"
>
<path
d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"
></path>
</svg>
</button>
</div>
کد CSS
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.min-h-28 {
min-height: 7rem;
}
.resize-none {
resize: none;
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-3 {
gap: 0.75rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.border-none {
border-style: none;
}
.bg-slate-100 {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fill-slate-500 {
fill: #64748b;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
.capitalize {
text-transform: capitalize;
}
.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity));
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 #0000);
}
.ring-slate-200 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity));
}
.duration-300 {
transition-duration: 300ms;
}
.placeholder\:text-slate-400::placeholder {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity));
}
.hover\:ring-slate-400:hover {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
}
.focus\:ring-slate-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
}