With background image
{/* With background image */}
{/*--------------------*/}
const backgroundImage = {
backgroundImage: 'linear-gradient(0deg, rgba(29, 78, 216, 0.8), rgba(29, 78, 216, 0.8)), url(/img/stones.jpg)'
}
<main className='relative main'>
{/* Sidebar */}
<div className='absolute inset-x-0 top-0 hidden p-2 transition transform origin-top-right'>
<div className='overflow-hidden bg-white rounded-lg ring-1 ring-gray-900 ring-opacity-5'>
<div className='flex items-center justify-between px-5 pt-4'>
<div>
<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path fillRule='evenodd' clipRule='evenodd' d='M20 0C8.95431 0 0 8.95431 0 20C0 31.0457 8.95431 40 20 40C31.0457 40 40 31.0457 40 20C40 8.95431 31.0457 0 20 0ZM9.88511 18.3683L17.0319 28.7809C18.4621 30.8646 21.5379 30.8646 22.9681 28.7809L30.1149 18.3683C31.7762 15.9479 28.8715 13.0146 26.4349 14.6521C22.5435 17.2672 17.4565 17.2672 13.5651 14.6521C11.1285 13.0146 8.22382 15.9479 9.88511 18.3683Z' fill='black' />
</svg>
</div>
<div className='-mr-2'>
<button type='button' className='inline-flex items-center justify-center p-2 text-gray-400 bg-white rounded-md hover:text-gray-500 hover:bg-gray-100'>
<svg className='w-6 h-6' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fillRule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clipRule='evenodd' /></svg>
</button>
</div>
</div>
<div role='menu' aria-orientation='vertical' aria-labelledby='main-menu'>
<div className='px-2 pt-2 pb-3 mt-4 space-y-1' role='none'>
<Link href='/'>
<a className='block px-3 py-2 text-base font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50' role='menuitem' > About </a>
</Link>
<Link href='/'>
<a className='block px-3 py-2 text-base font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50' role='menuitem' > Blog </a>
</Link>
<Link href='/'>
<a className='block px-3 py-2 text-base font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50' role='menuitem' > Product </a>
</Link>
<Link href='/'>
<a className='block px-3 py-2 text-base font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50' role='menuitem' > FAQs </a>
</Link>
</div>
<div role='none'>
<Link href='/'>
<a className='block w-full px-5 py-3 font-medium text-center text-gray-600 bg-gray-50 hover:bg-gray-100' role='menuitem' > Contact us </a> </Link>
</div>
</div>
</div>
</div>
{/* Sidebar */}
<nav className='flex items-center justify-between px-4 py-4'>
<div>
<Link href='/'>
<a className='block'>
<svg className='text-blue-700' width='40' height='40' viewBox='0 0 40 40' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
<path fillRule='evenodd' clipRule='evenodd' d='M20 0C8.95431 0 0 8.95431 0 20C0 31.0457 8.95431 40 20 40C31.0457 40 40 31.0457 40 20C40 8.95431 31.0457 0 20 0ZM9.88511 18.3683L17.0319 28.7809C18.4621 30.8646 21.5379 30.8646 22.9681 28.7809L30.1149 18.3683C31.7762 15.9479 28.8715 13.0146 26.4349 14.6521C22.5435 17.2672 17.4565 17.2672 13.5651 14.6521C11.1285 13.0146 8.22382 15.9479 9.88511 18.3683Z' />
</svg>
</a>
</Link>
</div>
<div>
<button type='button' className='px-2 py-2 text-gray-500 rounded-lg hover:bg-gray-100 lg:hidden'>
<span className='sr-only'>Open main menu</span>
<svg className='w-6 h-6' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fillRule='evenodd' d='M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clipRule='evenodd' /></svg>
</button>
</div>
<div className='hidden lg:block md:ml-10 md:space-x-8'>
<Link href='/'>
<a className='font-medium text-gray-500 hover:text-gray-900'>About</a>
</Link>
<Link href='/'>
<a className='font-medium text-gray-500 hover:text-gray-900'>Blog</a>
</Link>
<Link href='/'>
<a className='font-medium text-gray-500 hover:text-gray-900'>Product</a>
</Link>
<Link href='/'>
<a className='font-medium text-gray-500 hover:text-gray-900'>FAQs</a>
</Link>
<Link href='/'>
<a className='px-8 py-3 font-medium text-white bg-blue-800 rounded-lg hover:bg-blue-900 '>Contact Us</a>
</Link>
</div>
</nav>
<section className='px-4'>
<div className='px-4 py-10 bg-center bg-cover rounded-lg md:py-16 lg:py-24 xl:py-32' style={backgroundImage}>
<div className='text-center md:w-3/4 md:mx-auto xl:w-1/2'>
<h1 className='text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl'>This is dummy copy. It is not meant to be read.</h1>
<p className='mt-3 text-base text-blue-100 md:text-lg lg:text-xl'>It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>
<div className='mt-5 md:flex md:justify-center lg:mt-10'>
<div>
<Link href='/'>
<a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-blue-900 bg-white rounded-lg lg:px-20 md:px-12 hover:bg-blue-900 hover:text-white'>Primary</a>
</Link>
</div>
<div className='mt-3 md:mt-0 md:ml-3'>
<Link href='/'>
<a className='flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-blue-200 rounded-lg lg:px-20 md:px-12 bg-opacity-30 hover:bg-opacity-50 '>Option A</a>
</Link>
</div>
</div>
</div>
</section>
</main>