Slick Style Guide

Small rounded

Primary

Secondary

 
    {/* Small rounded */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 rounded hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded'>Option C</a>

Large rounded

Primary

Secondary

Option A

Option B

Option C

 
    {/* Large rounded */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded-lg'>Option C</a>

Full rounded

Primary

Secondary

Option A

Option B

Option C

 
    {/* Full rounded */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded-full hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 rounded-full hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded-full'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded-full'>Option C</a>

Square

Primary

Secondary

Option A

Option B

Option C

 
    {/* Square */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200'>Option C</a>

Uppercase text

Primary

Secondary

Option A

Option B

Option C

 
    {/* Uppercase text */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white uppercase bg-gray-800 rounded-lg hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 uppercase bg-gray-200 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 uppercase bg-transparent border border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 uppercase bg-transparent border-2 border-gray-200 rounded-lg'>Option C</a>

With soft shadow

Primary

Secondary

Option A

Option B

Option C

 
    {/* With soft shadow*/}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded-lg shadow-md hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 border border-gray-200 rounded-lg shadow-md'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded-lg'>Option C</a>

Vertical gradient

Primary

Secondary

Option A

Option B

Option C

 
    {/* Vertical gradient */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded-lg bg-gradient-to-b from-gray-600 to-gray-800 hover:from-gray-700 hover:to-gray-900 hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded-lg'>Option C</a>

Horizontal gradient

Primary

Secondary

Option A

Option B

Option C

 
    {/* Horizontal gradient */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded-lg bg-gradient-to-r from-gray-600 to-gray-800 hover:from-gray-700 hover:to-gray-900 hover:bg-gray-900'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded-lg'>Option C</a>

Raised with bottom profile

Primary

Secondary

Option A

Option B

Option C

 
    {/* Raised with bottom profile */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-700 border-b-4 border-gray-900 rounded-lg hover:bg-gray-600'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 border-b-4 border-gray-400 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-b-4 border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-b-4 border-gray-200 rounded-lg'>Option C</a>

Raised with top profile

Primary

Secondary

Option A

Option B

Option C

 
    {/* Raised with top profile */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-700 border-t-4 border-gray-900 rounded-lg hover:bg-gray-600'>Primary</a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 border-t-4 border-gray-400 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-t-4 border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-t-4 border-gray-200 rounded-lg'>Option C</a>

With icon on left

Primary

Secondary

Option A

Option B

Option C

 
    {/* With icon on left */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-900'>
    <svg className="w-6 h-6 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    <span>Primary</span>
    </a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded-lg'>Option C</a>

With icon on right

Primary

Secondary

Option A

Option B

Option C

 
    {/* With icon on left */}
    {/*--------------------*/}

    {/* Primary */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-900'>
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    <span>Primary</span>
    </a>

    {/* Secondary */}
    {/*--------------------*/}
    {/* Option A */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-gray-200 rounded-lg hover:bg-gray-300'>Option A</a>

    {/* Option B */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border border-gray-200 rounded-lg'>Option B</a>

    {/* Option C */}
    <a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-gray-900 bg-transparent border-2 border-gray-200 rounded-lg'>Option C</a>