Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Traditional CSS approach --> <!-- <div class="card">...</div> --> <!-- Tailwind utility-first approach --> <div class="bg-white rounded-xl shadow-md p-6 max-w-sm mx-auto"> <img class="w-full rounded-lg mb-4" src="photo.jpg" alt=""> <div> <h2 class="text-xl font-bold text-gray-900 mb-2">Card Title</h2> <p class="text-gray-600 text-sm leading-relaxed"> This card is built entirely with Tailwind utilities. No custom CSS needed! </p> <button class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors"> Learn More </button> </div> </div>
Result
Open