JSFiddle - React, Tailwind, and code Playground

by Roy Howie

HTML

<div id="holder">
    <input type="radio" name="tabs" value="1" id="check1" checked>
    <div class="content-holder">
    	<label for="check1">one</label>
        <div class="tab-content">
            <p>All my content for the first tab goes here.</p>
        </div>
    </div>
	<input type="radio" name="tabs" value="2" id="check2">
    <div class="content-holder">
    	<label for="check2">two</label>
        <div class="tab-content">
            <h2>You can put whatever you want in your tabs!</h2>
            <p>Any content, anywhere!</p>
            <p>Remember, though, they're absolutely positioned. This means they position themselves relative to their parent, div#holder, which is relatively positioned</p>
        </div>
    </div>
	<input type="radio" name="tabs" value="3" id="check3">
    <div class="content-holder">
    	<label for="check3">three</label>
        <div class="tab-content">
            <p>
                And maybe I want a picture of a nice cat in
                 my third tab!
            </p>
            <img src="http://placekitten.com/g/300/300">
        </div>
    </div>
</div>

CSS

#holder {
	display: block;
	position: relative;
	width: 600px;
	height: 450px;
	border: solid 1px black;   
}
p {
    margin: 5px 0 0 5px;
}
input[type="radio"] {
    position: absolute;
    left: -100%;
    top: -100%;
    height: 0;
    display: none;
}
input[type="radio"] + div.content-holder > label {
    display: inline-block;
    background-color: #7BE;
    border-radius: 2px;
    color: #333;
    height: 35px;
    margin: 5px 0 0 2px;
    padding: 15px 0 0 0;
    text-align: center;
    width: 33%;
    float: left;
}
input[type="radio"] + div.content-holder > div {
	position: absolute;
    width: 100%;
    text-align: center;
	top: 65px;
	display: none;
}
input[type="radio"]:checked + div.content-holder > div {
	display: block;
}
input[type="radio"]:checked + div.content-holder > label {
	background-color: #B1CF6F;
}
img {
    margin: auto;
    margin-top: 15px;
    left: 0;
    right: 0;
    position: absolute;
}