Web Components Library

Left Accent Border

No notes defined.

  • Handle: @tw-examples-left-accent-border
  • Preview:
  • Filesystem Path: components/10-other-examples/tailwind-examples/alerts/03-left-accent-border.hbs 
<div class="p-4 sm:p-12 max-w-3xl mx-auto">

    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
        <p class="font-bold">Be Warned</p>
        <p>Something not ideal might be happening.</p>
    </div>

</div>
 
<div class="p-4 sm:p-12 max-w-3xl mx-auto">

  <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
    <p class="font-bold">Be Warned</p>
    <p>Something not ideal might be happening.</p>
  </div>

</div>
 
/* No context defined. */