logo

Styling with Tailwind CSS

A React component styled using Tailwind CSS.

10 Stars

Code

import React from 'react';

const StyledComponent = () => {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-md">
      <h1 className="text-2xl font-bold">Styled with Tailwind CSS</h1>
      <p className="mt-2">This is a simple example of a component styled with Tailwind CSS.</p>
    </div>
  );
};

export default StyledComponent;

Explanation

This component is styled using Tailwind CSS classes. The div element has background color, text color, padding, and rounded corners applied. The h1 and p elements are also styled with Tailwind CSS classes for text size, font weight, and margin.