JSFiddle - React, Tailwind, and code Playground

by Amit Bhagat

HTML

<div class="curved-container">
    <div class="text-content">
        <h1>Welcome, Andrew!</h1>
        <p>You're probably wondering how to change this sample text...</p>
    </div>
    <div class="image-container">
    <img src="https://images.pexels.com/photos/7693114/pexels-photo-7693114.jpeg" style="height:200px" alt="Curved Banner">
    </div>

</div>

CSS

.curved-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1F1E2C;
    color: white;
    padding: 60px;
    height: 350px; /* Adjust as needed */
}

.text-content {
    width: 50%;
    padding: 40px;
    z-index: 2;
}

.image-container {
    width: 50%;
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: ellipse(5px 50% at right center); /* Small left-side curve */
}