3D Cube
In this craft, I share my learnings about 3D CSS and create a cube with help of VanillaCSS and TailwindCSS.

Faisal Husain
The above cube you looking at is made from code below . This is made using only CSS and Tailwind CSS .This is the closest I got with Tailwind .Please let me know if it can be improved.
<div
classN ame="bg-black h-[500px] flex items-center justify-center w-full "
style={{ perspective: '1000000px' }}
>
<div
className="relative size-[200px]"
style={{
transformStyle: 'preserve-3d',
transform: 'rotateX(10deg) rotateY(-10deg)',
}}
>
<div
className="absolute size-[200px] grid grid-cols-3"
style={{
transform: 'translateZ(100px)',
}}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
className="cube bg-gradient-to-r from-red-500 to-red-600 border-2 border-black/80"
></div>
))}
</div>
<div
className="absolute size-[200px] grid grid-cols-3"
style={{
transform: 'translateZ(-100px)',
}}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
className="cube bg-gradient-to-r from-blue-500 to-blue-600 border-2 border-black/80"
></div>
))}
</div>
<div
className="absolute size-[200px] grid grid-cols-3"
style={{
transform: 'translateX(-100px) rotateY(90deg)',
}}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
className="cube bg-gradient-to-r from-green-500 to-green-600 border-2 border-black/80"
></div>
))}
</div>
<div
className="absolute size-[200px] grid grid-cols-3"
style={{
transform: 'translateX(100px) rotateY(-90deg)',
}}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
className="cube bg-gradient-to-r from-white to-white border-2 border-black/80"
></div>
))}
</div>
<div
className="absolute size-[200px] grid grid-cols-3"
style={{
transform: 'translateY(-100px) rotateX(90deg)',
}}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
className="cube bg-gradient-to-r from-yellow-600 to-yellow-700 border-2 border-black/80"
></div>
))}
</div>
<div
className="absolute size-[200px] grid grid-cols-3"
style={{
transform: 'translateY(100px) rotateX(-90deg)',
}}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
className="cube bg-gradient-to-r from-orange-600 to-orange-700 border-2 border-black/80"
></div>
))}
</div>
</div>
</div>
Want to hire me as a freelancer? Let's discuss.
Drop a message and let's discuss
Drop in your email ID and I will get back to you.