Skip to content

Instantly share code, notes, and snippets.

View geekysrm's full-sized avatar
Hey, how are you?

Soumya Ranjan Mohanty geekysrm

Hey, how are you?
View GitHub Profile
function Welcome({ imgSrc, imgAlt, title, pricing, url }) {
return (
<img className="rounded" src={imgSrc} alt={imgAlt} />
<div className="mt-2">
<div className="font-bold leading-snug text-gray-700">
<a href={url} className="hover:underline">
imgAlt="Hotel California"
title="Welcome to Hotel California"
pricing="$259 USD/ night"
<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)
<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 class="md:flex">
<div class="md:flex-shrink-0">
class="rounded-lg md:w-56"
alt="Woman paying for a purchase"
<div class="mt-4 md:mt-0 md:ml-6">
<div class="text-sm font-bold tracking-wide text-indigo-600 uppercase">
<button class="px-4 py-2 font-semibold bg-blue-400 rounded">Click Me</button>
<p class="font-bold lg:font-semibold">
Hello, I am a paragaph styled using Tailwind CSS.
// tailwind.config.js
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
module.exports = {
plugins: [
// ...
// ...
@tailwind base;
@tailwind components;
@tailwind utilities;
geekysrm / default-tailwind-config.js
Created October 20, 2020 17:07
// tailwind.config.js
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
variants: {},
plugins: [],