@extends('layouts.master')
@section('tailwind')
    <link rel="stylesheet" href="{{asset('/css/tailwind.min.css')}}">
@endsection
@section('content')
@include('partials.containers-header')

<h2>Grids</h2>

<h2>Basic Grids</h2>
<!-- Full width column -->
<div class="flex mb-4">
  <div class="w-full bg-gray-500 h-12"></div>
</div>

<!-- Two columns -->
<div class="flex mb-4">
  <div class="w-1/2 bg-gray-400 h-12"></div>
  <div class="w-1/2 bg-gray-500 h-12"></div>
</div>

<!-- Three columns -->
<div class="flex mb-4">
  <div class="w-1/3 bg-gray-400 h-12"></div>
  <div class="w-1/3 bg-gray-500 h-12"></div>
  <div class="w-1/3 bg-gray-400 h-12"></div>
</div>

<!-- Four columns -->
<div class="flex mb-4">
  <div class="w-1/4 bg-gray-500 h-12"></div>
  <div class="w-1/4 bg-gray-400 h-12"></div>
  <div class="w-1/4 bg-gray-500 h-12"></div>
  <div class="w-1/4 bg-gray-400 h-12"></div>
</div>

<!-- Five columns -->
<div class="flex mb-4">
  <div class="w-1/5 bg-gray-500 h-12"></div>
  <div class="w-1/5 bg-gray-400 h-12"></div>
  <div class="w-1/5 bg-gray-500 h-12"></div>
  <div class="w-1/5 bg-gray-400 h-12"></div>
  <div class="w-1/5 bg-gray-500 h-12"></div>
</div>

<!-- Six columns -->
<div class="flex">
  <div class="w-1/6 bg-gray-400 h-12"></div>
  <div class="w-1/6 bg-gray-500 h-12"></div>
  <div class="w-1/6 bg-gray-400 h-12"></div>
  <div class="w-1/6 bg-gray-500 h-12"></div>
  <div class="w-1/6 bg-gray-400 h-12"></div>
  <div class="w-1/6 bg-gray-500 h-12"></div>
</div>

<hr class="mt-4 mb-4">

<h2>Mixed Column Sizes</h2>

<!-- Narrower side column -->
<div class="flex mb-4">
  <div class="w-3/4 bg-gray-500 h-12"></div>
  <div class="w-1/4 bg-gray-400 h-12"></div>
</div>

<!-- Wide center column -->
<div class="flex">
  <div class="w-1/5 bg-gray-500 h-12"></div>
  <div class="w-3/5 bg-gray-400 h-12"></div>
  <div class="w-1/5 bg-gray-500 h-12"></div>
</div>

<hr class="mt-4 mb-4">

<h2>Wrapping Columns</h2>

<div class="flex flex-wrap -mb-4">
  <div class="w-1/3 mb-4 bg-gray-400 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-500 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-400 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-500 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-400 h-12"></div>
</div>

<hr class="mt-4 mb-4">

<h2>Column Spacing</h2>

<div class="px-2">
  <div class="flex -mx-2">
    <div class="w-1/3 px-2">
      <div class="bg-gray-400 h-12"></div>
    </div>
    <div class="w-1/3 px-2">
      <div class="bg-gray-500 h-12"></div>
    </div>
    <div class="w-1/3 px-2">
      <div class="bg-gray-400 h-12"></div>
    </div>
  </div>
</div>

<hr class="mt-4 mb-4">

<h2>Automatic Column Widths</h2>

<!-- Full width column -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-500 h-12"></div>
</div>

<!-- Five columns -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
</div>

<!-- Seven columns -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
</div>

<!-- Eleven columns -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
</div>

<hr class="mt-4 mb-4">

<h2>Column Order</h2>

<div class="flex md:flex-row-reverse flex-wrap">
  <div class="w-full md:w-3/4 bg-gray-500 p-4 text-center text-gray-200">1</div>
  <div class="w-full md:w-1/4 bg-gray-400 p-4 text-center text-gray-700">2</div>
</div>

<hr class="mt-4 mb-4">

<h2>Simple Offsets</h2>

<div class="flex flex-wrap">
  <div class="w-1/3 ml-auto bg-gray-500 h-12"></div>
  <div class="w-1/3 mr-auto bg-gray-400 h-12"></div>
</div>







@include('partials.containers-footer')
@endsection