I'm working on a React application where I have multiple pricing cards (PricingCard) rendered using Tailwind CSS for styling. Each card consists of several sections, including a bullet points section (features) (i.e. on row 3 (LHS) that can vary in length.
I want to ensure that the left-hand side (LHS) container in the features section adjusts its height dynamically based on the content (features list), and that adjacent containers align properly, adjusting to the height of the container with the most text.
import React from 'react';
import { Link } from 'react-router-dom';
const PricingCard = ({ title, price, users, features, link, btnText, bgColor, textColor }) => {
return (
<div className={`bg-white overflow-hidden `}>
{/* row1 */}
<div className="flex flex-row">
<div className="w-3/5 flex flex-col bg-pricing-gray">
<div className="w-full bg-white h-full"></div>
<div className="w-10/12 py-4 flex justify-center items-center">
<p className="text-2xl flex justify-center items-center pl-4 font-extrabold text-left min-h-14">{title}</p>
</div>
<div className="w-full bg-white h-full"></div>
</div>
<div className={`w-2/5 min-h-36 flex flex-col items-center justify-center py-6 px-4 pt-8 border-l-8 border-white ${textColor} ${bgColor}`}>
<p className="text-2xl text-center font-extrabold ">{price}</p>
{users && <p className="text-lg text-center">{users}</p> }
</div>
</div>
{/* row2 to add cutting effect */}
<div className="flex flex-row">
<div className="w-3/5 flex flex-col items-center py-1 justify-center bg-pricing-gray"></div>
<div className="w-2/5">
<div className="w-full bg-white h-full"></div>
</div>
</div>
{/* row3 for bullet points */}
<div className="flex flex-row">
{/* LHS WITH CONTENT */}
<div className="w-11/12 flex flex-col items-center justify-center bg-pricing-gray">
<ul className="list-disc list-inside space-y-4 px-4 py-8">
{features.map((feature, index) => (
<li key={index}>{feature}</li>
))}
</ul>
</div>
{/* RHS ONLY BG */}
<div className="w-1/12">
<div className="w-full bg-white h-full"></div>
</div>
</div>
{/* row4 for blue line */}
<div className="flex flex-row">
<div className={`w-11/12 flex flex-col items-center py-2 justify-center ${bgColor}`}></div>
<div className="w-1/12">
<div className="w-full bg-white h-full"></div>
</div>
</div>
{/* row5 for white line */}
<div className="flex flex-row">
<div className="w-11/12 flex flex-col items-center py-2 justify-center bg-white"></div>
<div className="w-1/12">
<div className="w-full bg-white h-full"></div>
</div>
</div>
{/* row6 for button text */}
<div className="flex flex-row">
<div className={`w-11/12 flex flex-col text-2xl ${bgColor} ${textColor} font-extrabold items-center py-4 cursor-pointer uppercase justify-center `}>
<Link to={link}>{btnText}</Link>
</div>
<div className="w-1/12">
<div className="w-full bg-white h-full"></div>
</div>
</div>
</div>
);
};
export default PricingCard;
The PricingCardRow component maps over pricingData to create instances or cards, where each card can have a different number of bullet points (features). I want to ensure that the left-hand side (LHS) container in the features section (Row3) adjusts its height dynamically based on the content (features list), and that adjacent containers align properly, adjusting to the height of the container with the most text.
import React from 'react';
import PricingCard from './PricingCard';
import pricingData from './pricingData'; // assuming pricingData is in a separate file
const PricingCardRow = () => {
return (
<>
{pricingData.map((pricing, index) => (
<PricingCard
key={index}
title={pricing.title}
price={pricing.price}
users={pricing.users}
features={pricing.features}
link={pricing.link}
btnText={pricing.btnText || 'Get Started'}
bgColor={pricing.bgColor || 'bg-theme-blue'} // default bgColor if not provided in pricingData
textColor={pricing.textColor || 'text-white'} // default textColor if not provided in pricingData
/>
))}
</>
);
};
export default PricingCardRow;
