archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add badge alert example

Browse Source
This commit is contained in:
Adam Wathan 2017-11-21 15:54:00 -05:00
parent 4ca1ed387e
commit 770966ca76
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/source/docs/examples/alerts.blade.md
View File

@ -18,6 +18,16 @@ description: null
</div>
@endcomponent
### Modern with Badge
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'bg-indigo-darkest text-center px-0 lg:px-4'])
<div class="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex" role="alert">
<span class="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
<span class="font-semibold mr-2 text-left flex-1">Get the coolest t-shirts from our brand new store</span>
<svg class="opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
</div>
@endcomponent
### Left Accent Border
@component('_partials.code-sample', ['lang' => 'html'])