پیشنمایش زنده
کد HTML
<div
class="relative flex justify-center h-[300px] w-[160px] border border-4 border-black rounded-2xl bg-gray-50"
style="box-shadow: 5px 5px 2.5px 6px rgb(209, 218, 218)"
>
<span
class="border border-black bg-black w-20 h-2 rounded-br-xl rounded-bl-xl"
></span>
<span
class="absolute -right-2 top-14 border border-4 border-black h-7 rounded-md"
></span>
<span
class="absolute -right-2 bottom-36 border border-4 border-black h-10 rounded-md"
></span>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-right-2 {
right: -0.5rem;
}
.bottom-36 {
bottom: 9rem;
}
.top-14 {
top: 3.5rem;
}
.flex {
display: flex;
}
.h-10 {
height: 2.5rem;
}
.h-2 {
height: 0.5rem;
}
.h-7 {
height: 1.75rem;
}
.h-\[300px\] {
height: 300px;
}
.w-20 {
width: 5rem;
}
.w-\[160px\] {
width: 160px;
}
.justify-center {
justify-content: center;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-bl-xl {
border-bottom-left-radius: 0.75rem;
}
.rounded-br-xl {
border-bottom-right-radius: 0.75rem;
}
.border {
border-width: 1px;
}
.border-4 {
border-width: 4px;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}