Tailwindcss and React Icons (Beautiful Buttons)
Tags: html, css, react, design
Published: 2022-02-24 16:02:40

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 - 
```javascript
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 - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w94qvvj8hfq587kmhri.png)

### Example 2 - 
```javascript
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- 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fe5jq72vugfu2hko0xa.png)

## Example - 3
```javascript
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 - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmavi3uagiilc0z7yjzr.png)


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