JSFiddle - React, Tailwind, and code Playground

by deadendstreet

HTML

<div id="latest-events">
    <p>Mend: Being the Man She Needs provides insightful and positive steps to build, repair, and sustain a lifelong loving relationship.</p>
    <div class="img">
        <img src="http://davidgreen.me/wp-content/uploads/2015/04/mend7.jpg" />
    </div>
    <div class="booktext">
        <p>David Green offers clear and constructive guidance on:</p>
        <ul>
            <li>Encouraging her career</li>
            <li>Trust and honesty</li>
            <li>Sharing responsibilities</li>
            <li>Resolving conflict</li>
            <li>Romance, intimacy, and sex.-</li>
            <li>Family dynamics</li>
            <li>Emotional support</li>
        </ul>
    </div>
    <p class="buynow"><a href="#" class="myButton">Buy Now</a>
    </p>
</div>

CSS

#book{
    float: left;
    position: absolute;
    max-width: 100%;
}

.booktext {
    float: right;
    z-index: 100;
    position: absolute;
    padding-left: 25%;
}

#latest-events{
	width: 400px;
	float: right;
}
.myButton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1f76b9), color-stop(1, #428bc2));
	background:-moz-linear-gradient(top, #1f76b9 5%, #428bc2 100%);
	background:-webkit-linear-gradient(top, #1f76b9 5%, #428bc2 100%);
	background:-o-linear-gradient(top, #1f76b9 5%, #428bc2 100%);
	background:-ms-linear-gradient(top, #1f76b9 5%, #428bc2 100%);
	background:linear-gradient(to bottom, #1f76b9 5%, #428bc2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f76b9', endColorstr='#428bc2',GradientType=0);
	background-color:#1f76b9;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	display:inline-block;
	cursor:pointer;
	color:#fafafa;
	font-family:arial;
	font-size:25px;
	padding:10px 48px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2f6627;
	z-index: 100;
	position: absolute;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #428bc2), color-stop(1, #1f76b9));
	background:-moz-linear-gradient(top, #428bc2 5%, #1f76b9 100%);
	background:-webkit-linear-gradient(top, #428bc2 5%, #1f76b9 100%);
	background:-o-linear-gradient(top, #428bc2 5%, #1f76b9 100%);
	background:-ms-linear-gradient(top, #428bc2 5%, #1f76b9 100%);
	background:linear-gradient(to bottom, #428bc2 5%, #1f76b9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#428bc2', endColorstr='#1f76b9',GradientType=0);
	background-color:#428bc2;
}
.myButton:active {
	position:relative;
	top:1px;
}

.img {
	max-width: 305px;
	width: 100%;
max-height: auto;
float: left;
position: absolute;
}

.buynow {
	padding-top: 60%; 
	padding-left: 25%;

}