tailwind css 3 cards responsive design

 import React from 'react';

const Cards = () => {

  return (

    <div className="bg-white p-4">

      <div className="flex flex-col md:flex-row">

        <div className="md:w-1/3 p-4">

          <div className="bg-gray-300 p-4">Card 1</div>

        </div>

        <div className="md:w-1/3 p-4">

          <div className="bg-gray-300 p-4">Card 2</div>

        </div>

        <div className="md:w-1/3 p-4">

          <div className="bg-gray-300 p-4">Card 3</div>

        </div>

      </div>

    </div>

  );

}

export default Cards;

explaination

Here the parent div has the class "bg-white p-4" which applies a white background color and padding of 4px to it. Inside the parent div, there's another div with the class "flex flex-col md:flex-row" which aligns the three cards in a column on smaller screens and in a row on medium screens and above. Each of the three cards has the class "md:w-1/3 p-4" which sets the width to 1/3 of the available space on medium screens and above and adds a padding of 4px. Each card has a child div with the class "bg-gray-300 p-4" which applies a gray background color and padding of 4px to it.

Note: you need to import the tailwind css file in the head of your index.html file or import it in your scss file and link it to the project.