Tailwind Columns

Tailwind Three Columns Responsive example

Here is the example of three column responsive website example using tailwind css. Use flex in the wrapper div and use tailwind class for width percent to achieve the columns in tailwind css.

<div class="md:flex">
    <div class="w-full md:w-1/3 bg-green-200">First Column</div>
    <div class="w-full md:w-1/3 bg-green-400">second Column</div>
    <div class="w-full md:w-1/3 bg-green-200">Third Column</div>
</div>

Three columns responsive with margin separated.

Use negative margin with flex in wrapper ```div``` tag and then apply margin to each components.

<div class="md:flex md:-mx-4">
    <div class="w-full px-4 md:mx-4 md:w-1/3 bg-green-200">First Column</div>
    <div class="w-full px-4 md:mx-4 md:w-1/3 bg-green-400">Second Column</div>
    <div class="w-full px-4 md:mx-4 md:w-1/3 bg-green-200">First Column</div>
</div>

Twelve columns example

Example of twelve columns with flex only.

<div class="flex">
    <div class="w-1/12 bg-green-100">First Column</div>
    <div class="w-1/12 bg-green-200">2nd Column</div>
    <div class="w-1/12 bg-green-300">3rd Column</div>
    <div class="w-1/12 bg-green-400">4th Column</div>
    <div class="w-1/12 bg-green-500">5th Column</div>
    <div class="w-1/12 bg-green-600">6th Column</div>
    <div class="w-1/12 bg-green-700">7th Column</div>
    <div class="w-1/12 bg-green-800">8th Column</div>
    <div class="w-1/12 bg-green-900">9th Column</div>
    <div class="w-1/12 bg-green-800">10 Column</div>
    <div class="w-1/12 bg-green-700">11th Column</div>
    <div class="w-1/12 bg-green-600">12th Column</div>
</div>

Role of Flex wrap

Flex sets all the content in one row even we set widths to 25% of each.

<div class="flex">
    <div class="w-1/4 h-20 flex items-center bg-green-100">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">4th Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-100">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">4th Column</div>
</div>

Four Columns example with flex wrap.

In the above example we have set width to 25% however it all the columns are set in one row. To go columns in next row use flex wrap.

<div class="flex flex-wrap">
    <div class="w-1/4 h-20 flex items-center bg-green-100">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">4th Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-100">4th Column</div>
</div>

Tailwind Container

Use container with mx-auto to center and with padding 20.

<div class="container mx-autp px-4 md:px-20">
    <div class="bg-green-600 text-gray-200 px-4 py-6">
    This is my content inside container
    </div>
</div>

Equal height three columns responsive inside a container.

Examples shows a full background and all the content inside a container, similar to bootstrap container. The container has three coulms of equal height which will becomes full height for mobile devices.