JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row rowspacer">
    <div class="container">
        <div class="news-help col-md-3 col-sm-4 col-xs-12">
            <div class="bs-callout bs-callout-blueborder">
                 <h4><i class="fa fa-globe"></i>&nbsp;News</h4>
 <span class="small news-subtitle">from us</span>

                <form class="form-articles">
                    <div class="form-group">
                        <label for="sel1">Number of articles:</label>
                        <select class="form-control" id="sel1">
                            <option value="3">3</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="all">Alle</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
        <div class="news-wrapper col-md-9 col-sm-8 col-xs-12">
            <div class="bs-callout bs-callout-danger">
                 <h4>New order mechanism!</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, minus, eum quam adipisci saepe, unde asperiores nesciunt blanditiis similique nisi explicabo. Deserunt alias maxime nemo cupiditate, veritatis recusandae quasi nostrum.</p>
                <p class="small">01/09/2015</p>
            </div>
            <div class="bs-callout bs-callout-danger">
                 <h4>Open every day in August</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim consectetur, voluptatibus maiores totam delectus tempora exercitationem ad numquam, cupiditate, nisi quo expedita veniam repudiandae! Nam ipsum aperiam, recusandae maiores at.</p>
                <p class="small">01/08/2015</p>
            </div>
        </div>
    </div>
</div>

CSS

.rowspacer {
  margin-top: 40px;
}

.bs-callout {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  /*border-color: #eee;*/
  border-color: #E1E1E1;
  border-image: none;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px 1px 1px 5px;
  margin-bottom: 7px;
  padding: 20px;
  background-color: #fff;
}

.bs-callout-danger {
  border-left-color: #d9534f;
}

.bs-callout-blueborder {
  border-left-color: #325d88;
}

.news-subtitle {
  margin-left: 19px;
}

.form-articles {
  margin-top: 22px;
}