Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

import { Banner, BannerCollapseButton } from 'flowbite-react'
import { MdAnnouncement } from 'react-icons/md'
import { HiX } from 'react-icons/hi'

const StickyBannerCode = () => {
  return (
    <div>
      <Banner>
        <div className='flex w-full justify-between border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700 rounded-md'>
          <div className='mx-auto flex items-center'>
            <p className='flex items-center text-sm font-normal text-gray-500 dark:text-gray-400'>
              <MdAnnouncement className='mr-4 h-4 w-4' />
              <span className='[&_p]:inline'>
                New brand identity has been launched for the&nbsp;
                <a
                  href='/'
                  className='inline font-medium text-primary underline decoration-solid underline-offset-2 hover:no-underline dark:text-primary'>
                  MaterialIM
                </a>
              </span>
            </p>
          </div>
          <BannerCollapseButton
            color='gray'
            className='border-0 bg-transparent text-gray-500 dark:text-gray-400'>
            <HiX className='h-4 w-4' />
          </BannerCollapseButton>
        </div>
      </Banner>
    </div>
  )
}

export default StickyBannerCode

import { Banner, BannerCollapseButton } from 'flowbite-react'
import { MdPercent } from 'react-icons/md'
import { HiX, HiArrowRight } from 'react-icons/hi'

const BottomBannerCode = () => {
  return (
    <div>
      <Banner>
        <div className='flex w-full justify-between border-t border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700 rounded-md'>
          <div className='mx-auto flex items-center'>
            <p className='flex items-center text-sm font-normal text-gray-500 dark:text-gray-400'>
              <span className='mr-3 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 p-1 dark:bg-gray-600'>
                <MdPercent className='h-4 w-4' />
              </span>
              <span className='[&_p]:inline'>
                Get 5% commision per sale&nbsp;
                <a
                  href='/'
                  className='ml-0 flex items-center text-sm font-medium text-primary hover:underline dark:text-primary md:ml-1 md:inline-flex'>
                  Become a partner
                  <HiArrowRight className='ml-2' />
                </a>
              </span>
            </p>
          </div>
          <BannerCollapseButton
            color='gray'
            className='border-0 bg-transparent text-gray-500 dark:text-gray-400'>
            <HiX className='h-4 w-4' />
          </BannerCollapseButton>
        </div>
      </Banner>
    </div>
  )
}

export default BottomBannerCode

import {
  Banner,
  Label,
  TextInput,
  Button,
  BannerCollapseButton,
} from 'flowbite-react'
import { HiX } from 'react-icons/hi'

const NewsletterBannerCode = () => {
  return (
    <div>
      <Banner>
        <div className='flex w-full items-center justify-between rounded-md border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700'>
          <div className='mx-auto flex w-full shrink-0 items-center sm:w-auto'>
            <form
              action='#'
              className='flex w-full flex-col items-center md:flex-row md:gap-x-3'>
              <Label
                htmlFor='email'
                className='mb-2 mr-auto shrink-0 text-sm font-medium text-gray-500 dark:text-gray-400 md:m-0 md:mb-0'>
                Sign up for our newsletter
              </Label>
              <TextInput
                id='email'
                placeholder='Enter your email'
                required
                type='email'
                className='!form-control'
              />
              <Button type='submit' color='primary'>
                Subscribe
              </Button>
            </form>
          </div>
          <BannerCollapseButton
            color='gray'
            className='border-0 bg-transparent text-gray-500 dark:text-gray-400'>
            <HiX className='h-4 w-4' />
          </BannerCollapseButton>
        </div>
      </Banner>
    </div>
  )
}

export default NewsletterBannerCode