JSFiddle - React, Tailwind, and code Playground

by iDaniel19

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-sm-12 event-image">
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/13566920_909740069151458_4304253676514646728_n.jpg?oh=8fdf642bfd40d12f7c649a6972629d45&oe=596D9851"/>
                </div>
                <div class="col-sm-12 event-info">
                    <h1>Title</h1>
                    <div class="col-sm-6 event-time">
                        <p><span class="fa fa-clock-o" aria-hidden="true"></span> Time</p>
                    </div>
                    <div class="col-sm-6 event-location">
                        <p><span class="fa fa-map-marker" aria-hidden="true"></span> Location</p>
                    </div>
                    <div class="col-sm-12">
                        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consu untur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est enim ipsam voluptatem quia voluptas sit aspernatur.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-sm-12 event-image">
                    <img src="http://www.tallshipsfalmouth.co.uk/wp-content/uploads/2012/11/Mercedes-tall-ship2-e1354287088569.jpg"/>
                </div>
                <div class="col-sm-12 event-info">
                    <h1>Title</h1>
                    <div class="col-sm-6 event-time">
                       ...

CSS

.event-image > img {
    width:100%;
    height: auto;
}

.event-info > h1 {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding:20px 0;
    margin:0;
    line-height: 34px;
}

.event-time {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding:20px 0;
    margin:0;
    line-height: 20px;
}

.event-location {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding:20px 0;
    margin:0;
    line-height: 20px;
}