- Published on
6 Ideas To Help You Create A Juice Double Columns With Tailwind CSS Like A Pro
- What is Tailwind CSS?
- The description of Juice Double Columns ui component
- Why use Tailwind CSS to create a Juice Double Columns ui component?
- The preview of Juice Double Columns ui component
- The source code of Juice Double Columns ui component
- How to create a Juice Double Columns with Tailwind CSS?
- Idea #1: Create the HTML structure
- Idea #2: Style the columns
- Idea #3: Add padding to the columns
- Idea #4: Style the headings
- Idea #5: Add icons to the headings
- Idea #6: Make the component responsive
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that helps you quickly build custom user interfaces. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. With Tailwind CSS, you can create responsive designs, customize your styles, and reduce your CSS file size.
The description of Juice Double Columns ui component
Juice Double Columns is a popular UI component that displays two columns of content side by side. It's commonly used for displaying product features, pricing plans, or any other type of content that requires a comparison between two items. The Juice Double Columns UI component is simple, clean, and easy to use.
Why use Tailwind CSS to create a Juice Double Columns ui component?
Tailwind CSS provides a set of pre-defined CSS classes that you can use to create the Juice Double Columns UI component quickly. You don't need to write any custom CSS code, which saves you time and effort. Tailwind CSS also provides responsive classes that allow you to create a responsive Juice Double Columns UI component that looks great on all devices.
The preview of Juice Double Columns ui component
To create a Juice Double Columns UI component, you need to use HTML and CSS code. Here's a preview of what the Juice Double Columns UI component looks like:
Free download of the Juice Double Columns's source code
The source code of Juice Double Columns ui component
To create a Juice Double Columns UI component, you need to use HTML and CSS code. Here's the source code for the Juice Double Columns UI component:
<style>
.juice {
background-image: url('https://i.ibb.co/SN2Sp4T/juice.png');
}
.juice2 {
background-image: url('https://i.ibb.co/yyMXMSF/juice2.png');
}
.juice3 {
z-index: 10;
position: relative;
}
.juice3::after {
content: '';
position: absolute;
opacity: .2;
z-index: -999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('https://previews.123rf.com/images/olgasiv/olgasiv1403/olgasiv140300026/27343111-image-en-noir-sur-un-fond-blanc-dessin-de-l%C3%A9gumes-de-fruits-et-de-baies-.jpg');
}
.text-primary {
color: #f9b529;
}
.text-primary-lite {
color: #fac251;
}
.text-secondary {
color: #294356;
}
.text-secondary-lite {
color: #d5dee5;
}
.bg-primary {
background-color: #f9b529;
}
.bg-primary-lite {
background-color: #fac251;
}
.bg-secondary {
background-color: #294356;
}
.bg-secondary-lite {
background-color: #d5dee5;
}
</style>
<div class="h-screen bg-white">
<div class="juice3 bg-gray-100 bg-opacity-90 py-10">
<div class="container mx-auto px-4 flex flex-col lg:flex-row">
<div class="juice relative lg:w-2/3 rounded-xl bg-secondary-lite bg-cover p-16">
<p class="max-w-sm text-secondary text-4xl font-semibold">Active Summer With Juice Milk 300ml</p>
<p class="max-w-xs pr-10 text-secondary font-semibold mt-8">New arrivals with naturre fruits, juice milks, essential for summer</p>
<button class="mt-20 bg-white font-semibold px-8 py-2 rounded">Shop Now</button>
<div class="absolute bottom-5 right-5 flex">
<a href class="h-6 w-6 flex items-center justify-center rounded-md bg-white">
<svg class="h-3 text-gray-700" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="svg-inline--fa fa-chevron-left fa-w-8 fa-3x"><path fill="currentColor" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"></path></svg>
</a>
<a href class="ml-1.5 h-6 w-6 flex items-center justify-center rounded-md bg-yellow-400">
<svg class="h-3 text-gray-700" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="svg-inline--fa fa-chevron-right fa-w-8 fa-3x"><path fill="currentColor" d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"></path></svg>
</a>
</div>
</div>
<div class="juice2 mt-6 lg:mt-0 lg:ml-6 lg:w-1/3 rounded-xl bg-primary-lite bg-cover p-16">
<div class="max-w-sm">
<p class="text-4xl font-semibold uppercase">20% sale off</p>
<p class="mt-8 font-semibold">Syncthetic seeds<br />2.0 OZ</p>
<button class="mt-20 bg-white font-semibold px-8 py-2 rounded">Shop Now</button>
</div>
</div>
</div>
</div>
</div>
How to create a Juice Double Columns with Tailwind CSS?
Here are six ideas to help you create a Juice Double Columns UI component with Tailwind CSS like a pro:
Idea #1: Create the HTML structure
The first step in creating a Juice Double Columns UI component is to create the HTML structure. You need to create two columns and add the content to each column. Here's an example of the HTML structure:
<div class="container mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4">
<!-- Column 1 content goes here -->
</div>
<div class="w-full md:w-1/2 px-4">
<!-- Column 2 content goes here -->
</div>
</div>
</div>
In this example, we use the container
class to center the content, the flex
and flex-wrap
classes to create a flexbox layout, and the w-full
and md:w-1/2
classes to set the width of each column.
Idea #2: Style the columns
The next step is to style the columns. You can use the bg-white
class to set the background color of each column to white. You can also use the border
and border-gray-300
classes to add a border around each column. Here's an example:
<div class="container mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300">
<!-- Column 1 content goes here -->
</div>
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300">
<!-- Column 2 content goes here -->
</div>
</div>
</div>
Idea #3: Add padding to the columns
To add some space between the content and the border, you can use the p-4
class to add padding to each column. Here's an example:
<div class="container mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<!-- Column 1 content goes here -->
</div>
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<!-- Column 2 content goes here -->
</div>
</div>
</div>
Idea #4: Style the headings
To style the headings, you can use the text-lg
and font-bold
classes to set the font size and weight. Here's an example:
<div class="container mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<h2 class="text-lg font-bold">Column 1</h2>
<!-- Column 1 content goes here -->
</div>
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<h2 class="text-lg font-bold">Column 2</h2>
<!-- Column 2 content goes here -->
</div>
</div>
</div>
Idea #5: Add icons to the headings
To add icons to the headings, you can use the flex
and items-center
classes to create a flexbox layout and align the icon and text. You can also use the text-gray-500
class to set the color of the icon. Here's an example:
<div class="container mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<h2 class="text-lg font-bold flex items-center">
<i class="fas fa-check text-gray-500 mr-2"></i>
Column 1
</h2>
<!-- Column 1 content goes here -->
</div>
<div class="w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<h2 class="text-lg font-bold flex items-center">
<i class="fas fa-check text-gray-500 mr-2"></i>
Column 2
</h2>
<!-- Column 2 content goes here -->
</div>
</div>
</div>
Idea #6: Make the component responsive
To make the Juice Double Columns UI component responsive, you can use the md:w-1/2
class to set the width of each column on medium screens and above. You can also use the sm:w-full
class to set the width of each column to full width on small screens. Here's an example:
<div class="container mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full sm:w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<h2 class="text-lg font-bold flex items-center">
<i class="fas fa-check text-gray-500 mr-2"></i>
Column 1
</h2>
<!-- Column 1 content goes here -->
</div>
<div class="w-full sm:w-full md:w-1/2 px-4 bg-white border border-gray-300 p-4">
<h2 class="text-lg font-bold flex items-center">
<i class="fas fa-check text-gray-500 mr-2"></i>
Column 2
</h2>
<!-- Column 2 content goes here -->
</div>
</div>
</div>
Conclusion
Creating a Juice Double Columns UI component with Tailwind CSS is easy and straightforward. By using the pre-defined CSS classes provided by Tailwind CSS, you can create a responsive and customizable UI component in no time. With these six ideas, you can create a Juice Double Columns UI component like a pro.