geekysrm

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>

geekysrm

<Card
  imgSrc="https://bit.ly/31lfllc"
  imgAlt="Hotel California"
  title="Welcome to Hotel California"
  pricing="$259 USD/ night"
  url="/hotel/california-hotel"
/>

geekysrm

<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>

geekysrm

<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">

geekysrm

<button class="px-4 py-2 font-semibold bg-blue-400 rounded">Click Me</button>

geekysrm

<p class="font-bold lg:font-semibold">
  Hello, I am a paragaph styled using Tailwind CSS.
</p>

geekysrm

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }

geekysrm

module.exports = {
  plugins: [
    // ...
    require("tailwindcss"),
    require("autoprefixer"),
    // ...
  ],
};

geekysrm

@tailwind base;

@tailwind components;

@tailwind utilities;

geekysrm

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};