Algorithm
This is a simple Card design using simple classes of Tailwind CSS's -
- Background -- bg-whit, bg-gray-100
- Padding -- py-5
- Size -- w-64 m-5
- Border -- border
- Shadow -- shadow hover:shadow-lg
- Animation -- transition
- Image CSS -- w-full transition scale-[95%] hover:scale-100 delay-300
- Button CSS -- bg-blue-600 text-white px-4 py-2 rounded-md transition-all hover:shadow-md scale-[95%] hover:scale-100
Code Examples
#1 Code Example with HTML
Code -
HTML
See the Pen Simple Beautiful Product Card Using Tailwind CSS by Maniruzzaman Akash (@maniruzzaman-akash) on CodePen.
Copy The Code & Try With Live EditorOutput
