React & Tailwind CSS – Reusable Button Component

React & Tailwind CSS - Reusable Button Component
Share this:

In this section, we’ll build a reusable button component with react js and tailwind CSS 3. You must first install setup react with tailwind css. You can comment on the article below.

First you need to create Button.jsx component.


import React from 'react';

export default function Button({
  type = 'submit',
  className = '',
}) {
  return (
        `inline-flex items-center px-4 py-2 bg-gray-900 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest active:bg-gray-900 transition ease-in-out duration-150 ${
          processing && 'opacity-25'
        } ` + className

Now you can import Button Component and use anywhere.

Also Read : How to Create & Use Component in Angular 13 App


import Button from './Components/Button';

function App() {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="flex gap-x-4">
        <Button className="bg-red-600">Button</Button>
        <Button className="bg-green-600">Button</Button>
        <Button className="bg-purple-600">Button</Button>
        <Button className="bg-cyan-600">Button</Button>

export default App;

Now, run the server

npm start
npm run dev 

Also Read : Laravel 9 Multiple Database Connection Tutorial

Share this:

2 thoughts on “React & Tailwind CSS – Reusable Button Component

Leave a Reply