پیشنمایش زنده
کد HTML
<div class="flex items-end bg-orange-200 p-6 rounded-md border border-orange-400 m-2">
<div class="flex flex-col items-start">
<span class="font-medium text-lg text-orange-900">Try Lorem in browser</span>
<p class="text-base mt-2">Lorem Ipsum is simply dummy text of the printing.</p>
<p class="text-base">Enjoy your meal.</p>
<button class="flex justify-center items-center bg-orange-700 hover:bg-orange-800 pl-4 pr-4 pt-1.5 pb-1.5 mt-4 rounded-md text-white font-medium">
<span class="mr-2">Open Sandbox</span>
<svg class="w-6 h-6" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
</button>
</div>
<div class="ml-10 text-orange-900">
<svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-12 w-12">
<path d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
</div>
</div>
کد CSS
.m-2 {
margin: 0.5rem
}
.ml-10 {
margin-left: 2.5rem
}
.mr-2 {
margin-right: 0.5rem
}
.mt-2 {
margin-top: 0.5rem
}
.mt-4 {
margin-top: 1rem
}
.flex {
display: flex
}
.h-12 {
height: 3rem
}
.h-6 {
height: 1.5rem
}
.w-12 {
width: 3rem
}
.w-6 {
width: 1.5rem
}
.flex-col {
flex-direction: column
}
.items-start {
align-items: flex-start
}
.items-end {
align-items: flex-end
}
.items-center {
align-items: center
}
.justify-center {
justify-content: center
}
.rounded-md {
border-radius: 0.375rem
}
.border {
border-width: 1px
}
.border-orange-400 {
--tw-border-opacity: 1;
border-color: rgb(251 146 60 / var(--tw-border-opacity))
}
.bg-orange-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 215 170 / var(--tw-bg-opacity))
}
.bg-orange-700 {
--tw-bg-opacity: 1;
background-color: rgb(194 65 12 / var(--tw-bg-opacity))
}
.p-6 {
padding: 1.5rem
}
.pb-1 {
padding-bottom: 0.25rem
}
.pb-1\.5 {
padding-bottom: 0.375rem
}
.pl-4 {
padding-left: 1rem
}
.pr-4 {
padding-right: 1rem
}
.pt-1 {
padding-top: 0.25rem
}
.pt-1\.5 {
padding-top: 0.375rem
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.font-medium {
font-weight: 500
}
.text-orange-900 {
--tw-text-opacity: 1;
color: rgb(124 45 18 / var(--tw-text-opacity))
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.hover\:bg-orange-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(154 52 18 / var(--tw-bg-opacity))
}