Tailwindcss and React Icons (Beautiful Buttons)

Hello Guyz today I am going to show you how you can use gradient colors to create beautiful buttons with tailwind css and React icons

First Run these commands -

npm install react-icons --save
npm install -D tailwindcss
npx tailwindcss init

Then Add this CDN -

<script src="https://cdn.tailwindcss.com"></script>

Lets Get Started -

Example 1 -

import React from 'react';

import { FaSearchengin } from 'react-icons/fa'

function App() {

  const buttonStyling = flex space-x-3 mr-2 font-semibold bg-gradient-to-r from-blue-600 via-indigo-700 to-indigo-900 

  text-gray-100 rounded-sm ring-2 ring-blue-200 px-6 py-2 

  hover:bg-white  hover:text-white hover:ring-slate-300 mx-8;

return (

    <div className='bg-slate-800 p-20'>

      <div className='grid grid-cols-1 place-items-center'>

        <button

          type='submit'

          className={buttonStyling}>

          <p>Search</p>

          <FaSearchengin size='1.5rem' />

        </button>

      </div>

    </div>

  )

}

export default App

OUTPUT -

Example 2 -

import React from 'react';

import { FaSearchengin } from 'react-icons/fa'

function App() {

  const buttonStyling = flex space-x-3 mr-2 font-semibold bg-gradient-to-r from-indigo-600 to-pink-500

  text-gray-100 rounded-sm ring-2 ring-purple-400 px-6 py-2 

  hover:bg-white  hover:text-white hover:ring-slate-300 mx-8 shadow-lg shadow-indigo-300/50;

return (

    <div className='bg-slate-800 p-20'>

      <div className='grid grid-cols-1 place-items-center'>

        <button

          type='submit'

          className={buttonStyling}>

          <p>Search</p>

          <FaSearchengin size='1.5rem' />

        </button>

      </div>

    </div>

  )

}

export default App

OUTPUT-

Example - 3

import React from 'react';

import { MdUnsubscribe } from 'react-icons/md'

function App() {

  const buttonStyling = flex space-x-3 mr-2 font-semibold bg-gradient-to-r from-slate-500 via-slate-700 to-slate-900

  text-gray-100 rounded-md ring-2 ring-slate-400 px-6 py-2 

  hover:bg-white hover:text-white hover:ring-slate-300 mx-8 shadow-lg shadow-slate-800/100;

return (

    <div className='bg-slate-100 p-20'>

      <div className='grid grid-cols-1 place-items-center'>

        <button

          type='submit'

          className={buttonStyling}>

          <p>Subscribe</p>

          <MdUnsubscribe size="1.7rem" />

        </button>

      </div>

    </div>

  )

}

export default App

OUTPUT -

Thats how you can use gradient color in Tailwind and along with that use react icons to create beautiful buttons.

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/waadu-css-a-mini-framework-4bfi

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj