JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div class="slider-wrap-wide">
    <div class="slider-wrap">
        <div class="slider-title">Title</div>
        <div class="slider-line"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatum accusantium.</p> 
        <a href="#">further information</a>
    </div>
</div>

CSS

.slider-wrap-wide {
    width: 100%;
    text-align: right;
}
.slider-wrap {
    background: #f4f4f4;
    text-align: center;
    max-width: 300px;
    padding: 5%;
    display:inline-block;
}
.slider-title {
    font-weight: bold;
    font-size: 52px;
}
.slider-line {
    border:2px solid #666;
    width:100px;
    display:inline-block;
}
.slider-wrap p {
    font-style: italic;
    font-size: 24px;
}
.slider-wrap a {
    background: green;
    padding: 8px 24px;
    display: inline-block;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    border: 4px solid #eee;
    text-transform: uppercase;
}