Simple But Beautiful Product Card Design Using Tailwind CSS

Algorithm


This is a simple Card design using simple classes of Tailwind CSS's -

  1. Background -- bg-whit, bg-gray-100
  2. Padding -- py-5
  3. Size -- w-64 m-5 
  4. Border -- border
  5. Shadow -- shadow hover:shadow-lg
  6. Animation -- transition 
  7. Image CSS -- w-full transition scale-[95%] hover:scale-100 delay-300
  8. 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 Editor

Output

x
+
cmd

Demonstration