پیشنمایش زنده
کد HTML
<div
class="grid grid-flow-row grid-cols-3 grid-rows-2 p-4 gap-2 rounded-lg bg-gradient-to-br from-sky-800 via-sky-700 to-sky-400 [box-shadow:3px_4px_0px_2px]"
>
<button
class="col-span-3 col-start-2 relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]"
>
<span class="rotate-90 font-bold text-xs">
<svg
xmlns="http://www.w3.org/2000/svg"
width="800px"
height="800px"
viewBox="0 0 24 24"
class="fill-neutral-50 w-12 h-12"
>
<path
d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z"
></path>
</svg>
</span>
</button>
<button
class="relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]"
>
<span class="font-bold text-xs">
<svg
xmlns="http://www.w3.org/2000/svg"
width="800px"
height="800px"
viewBox="0 0 24 24"
class="fill-neutral-50 w-12 h-12"
>
<path
d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z"
></path>
</svg>
</span>
</button>
<button
class="relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]"
>
<span class="-rotate-90 font-bold text-xs">
<svg
xmlns="http://www.w3.org/2000/svg"
width="800px"
height="800px"
viewBox="0 0 24 24"
class="fill-neutral-50 w-12 h-12"
>
<path
d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z"
></path>
</svg>
</span>
</button>
<button
class="relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]"
>
<span class="rotate-180 font-bold text-xs">
<svg
xmlns="http://www.w3.org/2000/svg"
width="800px"
height="800px"
viewBox="0 0 24 24"
class="fill-neutral-50 w-12 h-12"
>
<path
d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z"
></path>
</svg>
</span>
</button>
</div>
کد CSS
.relative {
position: relative;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-start-2 {
grid-column-start: 2;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.h-10 {
height: 2.5rem;
}
.h-12 {
height: 3rem;
}
.w-10 {
width: 2.5rem;
}
.w-12 {
width: 3rem;
}
.-rotate-90 {
--tw-rotate: -90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-2 {
gap: 0.5rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.bg-neutral-800 {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-sky-800 {
--tw-gradient-from: #075985 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(7 89 133 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-sky-700 {
--tw-gradient-to: rgb(3 105 161 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from),
#0369a1 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-sky-400 {
--tw-gradient-to: #38bdf8 var(--tw-gradient-to-position);
}
.fill-neutral-50 {
fill: #fafafa;
}
.p-4 {
padding: 1rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.duration-300 {
transition-duration: 300ms;
}
.\[box-shadow\:2px_2px_0px_2px\] {
box-shadow: 2px 2px 0px 2px;
}
.\[box-shadow\:3px_4px_0px_2px\] {
box-shadow: 3px 4px 0px 2px;
}
.hover\:translate-x-0:hover {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:translate-x-0\.5:hover {
--tw-translate-x: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:translate-y-0:hover {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:translate-y-0\.5:hover {
--tw-translate-y: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:\[box-shadow\:1px_1px_0px_1px\]:hover {
box-shadow: 1px 1px 0px 1px;
}