Hero Patterns

Samples

<h2 class="mx-10 text-2xl lg:text-3xl my-2" >Hello World</h2> <p class="mx-10 text-xl lg:text-2xl max-w-3xl" > <pre> <div class="flex flex-col m-2 relative pb-10 mb-10 bg-red-400"> <div> class="absolute left-0 bg-repeat w-48 h-full heropattern-fallingtriangles-red-100" style='width: 160px;height: 60px; transform: rotate(227deg) scale(1.5);' /> <div> class="hidden lg:block absolute right-0 bg-repeat w-48 h-full transform heropattern-floatingcogs-red-100" style="background-position:32px" /> <div class="lg:ml-40"> <h2 class="mx-10 text-2xl lg:text-3xl my-2" >Hello World</h2> <p class="mx-10 text-xl lg:text-2xl max-w-3xl" > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> > </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Patterns

Credits

patterns from Steve Schoger / toggle from Steven Maco