wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Improve responsive design example

Browse source
This commit is contained in:
Jonathan Reinink 2017-10-31 08:52:03 -04:00
parent 0af4718fb8
commit 508cf4d721
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/source/docs/responsive-design.blade.md
View file

@ -14,31 +14,31 @@ This is done using predefined screen sizes (media query breakpoints), each of wh
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex justify-center">
<div class="bg-purple w-24 h-24 rounded-full"></div>
<div class="bg-purple text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
</div>
@endslot
@slot('sm')
<div class="flex justify-center">
<div class="bg-green w-24 h-24 rounded-full"></div>
<div class="bg-green text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
</div>
@endslot
@slot('md')
<div class="flex justify-center">
<div class="bg-blue w-24 h-24 rounded-full"></div>
<div class="bg-blue text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
</div>
@endslot
@slot('lg')
<div class="flex justify-center">
<div class="bg-red w-24 h-24 rounded-full"></div>
<div class="bg-red text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
</div>
@endslot
@slot('xl')
<div class="flex justify-center">
<div class="bg-orange w-24 h-24 rounded-full"></div>
<div class="bg-orange text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
</div>
@endslot
@slot('code')
<div class="none:bg-purple sm:bg-green md:bg-blue lg:bg-red xl:bg-orange ...">
<div class="none:bg-purple none:text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
...
</div>
@endslot