Grid Layouts
Grid Layouts 01
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
</div>
</div>
</div>
Grid Layouts 02
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
</div>
</div>
Grid Layouts 03
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, on top.</p>
</div>
</div>
</div>
Grid Layouts 04
=
<div class="bg-gray-50 text-gray-100 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid grid-cols-1 gap-6 lg:gap-x-8">
<div class="bg-gray-600 px-6 lg:px-12 pt-20 lg:pt-32 xl:pt-48 pb-8 lg:pb-12 rounded">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
</div>
</div>
Grid Layouts 05
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-12 py-20 rounded">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium mb-6">Save money with our new like Service</h2>
<p class="text-lg md:text-xl">One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
<div class="bg-gray-200 px-12 py-20 rounded">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium mb-6">Wow look at me, how nice, how bold</h2>
<p class="text-lg md:text-xl">One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
</div>
</div>
Grid Layouts 06
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-4 pb-20">
<div class="md:grid md:grid-cols-2 md:gap-12 max-w-screen-xl mx-auto mt-12 space-y-8 md:space-y-0">
<div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-48">
<div class="self-center">
<span class="text-xl font-semibold text-gray-700 block">Troubled dreams</span>
<p class="mt-3">One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed in his bed into a horrible vermin.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
<div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-48">
<div class="self-center">
<span class="text-xl font-semibold text-gray-700 block">Doing your own business</span>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
<div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-48">
<div class="self-center">
<span class="text-xl font-semibold text-gray-700 block">Shut his eyes so</span>
<p class="mt-3">He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
<div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-48">
<div class="self-center">
<span class="text-xl font-semibold text-gray-700 block">Other travelling salesmen</span>
<p class="mt-3">You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
</div>
</div>
Grid Layouts 07
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid grid-cols-1">
<div class="bg-gray-200 px-6 lg:px-12 pt-20 lg:pt-32 xl:pt-48 pb-24 lg:pb-20 xl:pb-48 rounded">
</div>
<div class="mt-8">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Amazing grid layouts</h2>
<p class="text-xl lg:text-2xl text-gray-600 mt-2">One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
</div>
</div>
Grid Layouts 08
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
</div>
</div>
</div>
Grid Layouts 09
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 row-span-1 md:row-span-2 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
</div>
</div>
</div>
Grid Layouts 10
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 lg:col-span-1 row-span-1 md:row-span-2 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 lg:col-span-2 row-span-1 md:row-span-2 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-end">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
</div>
</div>
总共 10 条记录