Currently, I am working on developing this card utilizing React, HTML, and CSS
Take a look at my code snippet:
<div className="plan">
<div className="plan-name">
<h5>BASIC</h5>
</div>
<div className="plan-price">
<h2>$ 6.99</h2>
<span>Screen Availabilty Simultaneously</span>
</div>
<div className="plan-details">
<ul>
<li>
<span>
<CheckIcon />
</span>
Access to All Library in Unlimited
</li>
<li>New Content Monthly</li>
<li>Available on PC, Smartphones and tablet</li>
<li>Drawing in Color</li>
<li>Color in Very High Quality</li>
<li>Canceable at Any Time</li>
</ul>
</div>
</div>
CSS Styles:
.plan {
border-radius: 25px;
overflow: hidden;
background-color: #fff;
}
.plan-name {
background-color: #3e104f;
padding: 25px 0;
border-style: solid;
border-width: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.plan-price {
color: #3e104f;
background-color: #fff;
padding: 35px 0;
}
.plan-details {
background-color: #3e104f;
height: 100%;
border-radius: 20px;
}
Resulting Output:
However, I have encountered an issue with the appearance of an unexpected white border around all corners as highlighted above. Does anyone have any insights on what might be causing this or how I can resolve it effectively?