View card-component.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Welcome({ imgSrc, imgAlt, title, pricing, url }) { | |
return ( | |
<div> | |
<img className="rounded" src={imgSrc} alt={imgAlt} /> | |
<div className="mt-2"> | |
<div> | |
<div className="font-bold leading-snug text-gray-700"> | |
<a href={url} className="hover:underline"> | |
{title} | |
</a> |
View react-tailwind-usage.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Card | |
imgSrc="https://bit.ly/31lfllc" | |
imgAlt="Hotel California" | |
title="Welcome to Hotel California" | |
pricing="$259 USD/ night" | |
url="/hotel/california-hotel" | |
/> |
View html-3.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="px-4 py-4 mb-3 font-normal bg-gray-300"> | |
<div class="flex flex-col justify-between md:flex-row"> | |
<h3 class="mb-2 text-2xl font-semibold leading-snug"> | |
Use TailwindCSS with Gatsby (with Emotion or styled-components) | |
</h3> | |
<div class="flex items-center mb-2 space-x-2"> | |
<p class="px-2 text-gray-200 bg-blue-600 rounded">#gatsby</p> | |
<p class="px-2 text-gray-800 bg-teal-400 rounded">#tailwindcss</p> | |
<p class="px-2 text-gray-200 bg-purple-600 rounded">#css</p> | |
</div> |
View html-2.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="md:flex"> | |
<div class="md:flex-shrink-0"> | |
<img | |
class="rounded-lg md:w-56" | |
src="https://bit.ly/34e2djy" | |
alt="Woman paying for a purchase" | |
/> | |
</div> | |
<div class="mt-4 md:mt-0 md:ml-6"> | |
<div class="text-sm font-bold tracking-wide text-indigo-600 uppercase"> |
View html-1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button class="px-4 py-2 font-semibold bg-blue-400 rounded">Click Me</button> |
View responsive-html.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class="font-bold lg:font-semibold"> | |
Hello, I am a paragaph styled using Tailwind CSS. | |
</p> |
View modify-tailwind-config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// tailwind.config.js | |
module.exports = { | |
theme: { | |
colors: { | |
indigo: '#5c6ac4', | |
blue: '#007ace', | |
red: '#de3618', | |
} | |
} |
View postcss.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
plugins: [ | |
// ... | |
require("tailwindcss"), | |
require("autoprefixer"), | |
// ... | |
], | |
}; |
View default-tailiwnd-css.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@tailwind base; | |
@tailwind components; | |
@tailwind utilities; |
View default-tailwind-config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// tailwind.config.js | |
module.exports = { | |
future: {}, | |
purge: [], | |
theme: { | |
extend: {}, | |
}, | |
variants: {}, | |
plugins: [], | |
}; |
NewerOlder