JSFiddle - React, Tailwind, and code Playground

by Glen Cheney

HTML

<div class="container">
    <article>
        <section class="clip shadow radius-big">
            <div class="slides">
                <div class="js-slide-container">
                    <div class="slide" style="background-image: url(http://jessethoman.com/wp/wp-content/uploads/2012/03/2_Air_Info.jpg);">
                        <img class="" src="http://jessethoman.com/wp/wp-content/uploads/2012/03/2_Air_Info.jpg" alt="blarg" width="1024" height="768" />
                    </div>
                </div>
            </div>
        </section>
        
        <section class="post-content shadow radius-big">
            <h1>Post Title</h1>
            <p>Some post content blah blah blah</p>        
        </section>
    </article>
</div>

CSS

body { margin: 10px; }
.container { width: 960px; margin: auto; }

section {
    background-color: #bada55;
    margin: 20px 0;
}

.shadow {
    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.8);
}

.radius-big {
    border-radius: 15px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.clip {
    overflow: hidden;
    width: 960px;
    height: 500px;
}


.slides { position: relative; } /* breaks it */

.slides img { display: none; }
.slides .slide {
    width: 100%;
    height: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-position: 0 0;
    border-radius: 15px;
    background-size: 960px;
}

.post-content { padding: 20px; }

JavaScript

/* Border radius with overflow hidden bug */