Skip to content

Instantly share code, notes, and snippets.

Avatar
👋
Hey, how are you?

Soumya Ranjan Mohanty geekysrm

👋
Hey, how are you?
View GitHub Profile
View card-component.jsx
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
<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
<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
<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
<button class="px-4 py-2 font-semibold bg-blue-400 rounded">Click Me</button>
View responsive-html.html
<p class="font-bold lg:font-semibold">
Hello, I am a paragaph styled using Tailwind CSS.
</p>
View modify-tailwind-config.js
// tailwind.config.js
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
View postcss.config.js
module.exports = {
plugins: [
// ...
require("tailwindcss"),
require("autoprefixer"),
// ...
],
};
View default-tailiwnd-css.css
@tailwind base;
@tailwind components;
@tailwind utilities;
View default-tailwind-config.js
// tailwind.config.js
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
};