Snippets.io
Home
Add Snippet
Add Docs
Add Code
Docs
Admin
Search
Search
Tailwind Card
code
Tailwind Design
Preview
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="https://tailwindcss.com/_next/static/media/sarah-dayan.de9b3815.jpg" alt="" width="384" height="512"> <div class="pt-6 md:p-8 text-center md:text-left space-y-4"> <blockquote> <p class="text-lg font-medium"> “Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.” </p> </blockquote> <figcaption class="font-medium"> <div class="text-sky-500 dark:text-sky-400"> Sarah Dayan </div> <div class="text-slate-700 dark:text-slate-500"> Staff Engineer, Algolia </div> </figcaption> </div> </figure>
React Basics
code
Preview
React.js is a JavaScript library JSX is a syntax extension for JavaScript. It was written to be used with React. JSX compiler will translate any JSX into regular JavaScript. JSX element can be saved in a variable, passed to a function, stored in an object or array
Fully compatible with
Angular
Gatsby
Plain HTML
Next.js
Nuxt.js
React
Svelte
Vue.js