w3resource

Create a react component on top of Tailwind CSS


For JavaScript developers, React is ubiquitous. So is Tailwind CSS for creating UI/UX. This guide will unfold how to create a react component on top of Tailwind CSS.

It is assumed that you are familiar with JavaScript, HTML, CSS and command line in whichever OS you are using. Make sure you have Nodejs and npm installed.

We will build a Pricing Table.

To start the project, we will run the following command in terminal of our local machine.


npx create-react-app pricing-table-app

This will create the project with necessary directory structure.

Create new file named PricingTable.js in the src directory of your React project. The complete path for the file should be src/PricingTable.js.


import React from 'react';

const PricingTable = ({ plans }) => {
  return (
    <div className="flex justify-center">
      {plans.map((plan) => (
        <div
          key={plan.id}
          className="bg-white rounded-lg shadow-lg p-6 m-4"
        >
          <h2 className="text-2xl font-bold mb-4">{plan.name}</h2>
          <div className="text-4xl font-bold mb-4">
            ${plan.price}
            <span className="text-lg font-normal">/{plan.interval}</span>
          </div>
          <ul className="mb-6">
            {plan.features.map((feature) => (
              <li key={feature} className="flex items-center">
                <svg
                  className="w-4 h-4 fill-current text-green-500 mr-2"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M7.165 11.349L4.01 8.192a.698.698 0 0 1 0-.988l.988-.988a.698.698 0 0 1 .988 0L8.8 7.364l4.213-4.212a.698.698 0 0 1 .988 0l.988.988a.698.698 0 0 1 0 .988l-5.19 5.19a.698.698 0 0 1-.988 0z"
                  />
                </svg>
                {feature}
              </li>
            ))}
          </ul>
          <button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full">
            Select Plan
          </button>
        </div>
      ))}
    </div>
  );
};

We will see explanation of which section of code does what.


import React from 'react';

This section imports the React library, which is necessary for creating React components.


const PricingTable = ({ plans }) => {

This section defines a functional component named PricingTable that accepts a single prop called plans. The prop plans is destructured from the component's props using object destructuring syntax.

return (
    <div className="flex justify-center">

This section starts the JSX code block and renders a <div> element with the CSS classes flex and justify-center. These classes are provided by Tailwind CSS and control the flex layout and horizontal centering of the content within the div.

{plans.map((plan) => (
        <div
          key={plan.id}
          className="bg-white rounded-lg shadow-lg p-6 m-4">

This section starts a JavaScript expression within the JSX code block. It maps over the plans array using the map function to generate a set of <div> elements. Each plan in the plans array is mapped to a <div> element with CSS classes bg-white, rounded-lg, shadow-lg, p-6, and m-4. These classes define the background color, rounded corners, box shadow, padding, and margin of each plan card.

<h2 className="text-2xl font-bold mb-4">{plan.name}</h2>
<div className="text-4xl font-bold mb-4">
            ${plan.price}
            <span className="text-lg font-normal">/{plan.interval}</span>
          </div>

This section renders a <div> element with CSS classes text-4xl and font-bold. The text content of this div is composed of the plan's price property, which is displayed as a dollar amount, followed by a <span> element with CSS classes text-lg and font-normal. The span element contains the plan's interval property (e.g., month), which is displayed next to the price.

<ul className="mb-6">
            {plan.features.map((feature) => (
              <li key={feature} className="flex items-center">
                <svg
                  className="w-4 h-4 fill-current text-green-500 mr-2"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M7.165 11.349L4.01 8.192a.698.698 0 0 1 0-.988l.988-.988a.698.698 0 0 1 .988 0L8.8 7.364l4.213-4.212a.698.698 0 0 1 .988 0l.988.988a.698.698 0 0 1 0 .988l-5.19 5.19a.698.698 0 0 1-.988 0z"
                  />
                </svg>
                {feature}
              </li>
            ))}
          </ul>

This section renders an unordered list (<ul>) with CSS class mb-6 (margin bottom 6 units). Inside the list, each feature of the current plan is mapped to a list item (

<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full">
            Select Plan
          </button>

This section renders a <button> element with CSS classes bg-blue-500, hover:bg-blue-600, text-white, font-bold, py-2, px-4, and rounded-full. These classes define the background color, hover state, text color, font weight, padding, and rounded corners of the button. The button displays the text "Select Plan".

</div>
      ))}
    </div>
  );
};

These closing sections close the div and map expressions and end the PricingTable component definition.


export default PricingTable;

This section exports the PricingTable component as the default export of the module so that it can be imported and used in other files.

Now replace the existing contents of src/App.js with the following piece of code.


import React from 'react';
import PricingTable from './PricingTable';

const plans = [
  {
    id: 1,
    name: 'Basic',
    price: 9.99,
    interval: 'month',
    features: ['Feature 1', 'Feature 2', 'Feature 3'],
  },
  {
    id: 2,
    name: 'Pro',
    price: 19.99,
    interval: 'month',
    features: ['Feature 1', 'Feature 2', 'Feature 3', 'Feature 4'],
  },
  {
    id: 3,
    name: 'Premium',
    price: 29.99,
    interval: 'month',
    features: ['Feature 1', 'Feature 2', 'Feature 3', 'Feature 4', 'Feature 5'],
  },
];

const App = () => {
  return (
    <div>
      <h1 className="text-3xl font-bold mb-4">Choose a plan:</h1>
      <PricingTable plans={plans} />
    </div>
  );
};

export default App;

Let w3resource explain you the code above.


import React from 'react';
import PricingTable from './PricingTable';

These sections import the necessary dependencies. The React library is imported, along with the PricingTable component, which is imported from the PricingTable.js file in the current directory.


const plans = [
  {
    id: 1,
    name: 'Basic',
    price: 9.99,
    interval: 'month',
    features: ['Feature 1', 'Feature 2', 'Feature 3'],
  },
  {
    id: 2,
    name: 'Pro',
    price: 19.99,
    interval: 'month',
    features: ['Feature 1', 'Feature 2', 'Feature 3', 'Feature 4'],
  },
  {
    id: 3,
    name: 'Premium',
    price: 29.99,
    interval: 'month',
    features: ['Feature 1', 'Feature 2', 'Feature 3', 'Feature 4', 'Feature 5'],
  },
];

These sections define an array named plans. Each element of the array represents a different pricing plan and contains properties like id, name, price, interval, and features. You can customize the plan details and add or remove plans as needed.


const App = () => {
  return (
    <div>
      <h1 className="text-3xl font-bold mb-4">Choose a plan:</h1>
      <PricingTable plans={plans} />
    </div>
  );
};

These sections define a functional component named App. The component renders a <div> element that contains an <h1> element displaying the heading "Choose a plan:". Below the heading, the PricingTable component is used with the plans array passed as a prop.


export default App;

This section exports the App component as the default export of the module so that it can be imported and used in other files.

To integrate Tailwind CSS in our project, let us now run the following command.


npm install tailwindcss

Create a new file named tailwind.config.js in the project's root directory and populate the following code into it:


module.exports = {
  content: ['./src/**/*.js'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Next, open the src/index.js file and add the following line at the top to import the tailwind.css file: import './index.css';

Start the development server now. In the terminal, run the following command to start the React development server:


 npm start

Open your favourite browser and access this : localhost:3000, and you will see your project running



Follow us on Facebook and Twitter for latest update.