CSS Layout

Ribbon

Credit - Frontend Master Phuoc Nguyen

TailwindCSS + ReactJS version of https://phuoc.ng/collection/css-layout/ribbon/

Please read the original blog for the rationale behind these solutions.


export default function App() {
  return (
    <div className='flex items-center justify-center h-8 w-16 relative'>
      <div className='border-[1rem] border-[#d1d5db] absolute -bottom-2 -left-6 border-l-transparent' />
      <div className='absolute left-0 border-r-0 top-full border-[0.5rem] border-transparent border-b-0 border-t-[#6b7280] z-[1]'/>
      <div className='absolute right-0 border-l-0 top-full border-[0.5rem] border-transparent border-b-0 border-t-[#6b7280] z-[1]'/>
      <div className='border-[1rem] border-[#d1d5db] absolute -bottom-2 -right-6 border-r-transparent'/>
      <div className='bg-[#9ca3af] z-[1] w-full h-full'/>
    </div>
  );
}
Last Update: 11:59 - 22 April 2024

On this page

No Headings