JSFiddle - React, Tailwind, and code Playground

by Phil Everton

HTML

<script src="//malsup.github.io/min/jquery.cycle2.min.js"></script>
<ul id="homepage-carousel" class="hero cycle-slideshow" data-cycle-slides="> li" data-cycle-speed="1000" data-cycle-fx="scrollHorz">
    <li class="homepage-carousel-item">
        <img src="http://lorempixel.com/output/people-q-c-640-480-10.jpg"/>
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item">
        <img src="http://lorempixel.com/output/city-q-c-640-480-10.jpg"/>
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item">
        <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"/>
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read...

CSS

#homepage-carousel, .homepage-carousel-item {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    list-style:none;
    overflow:hidden;
}
.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
    /*img size*/
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    /*img pos*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*offset position based on img size*/
}

/*optional*/
html, body { height:100%; }/*if page < viewport*/
html, body, .homepage-carousel-title, .homepage-carousel-subtitle, .homepage-carousel-desc p { margin:0; padding:0; }/*remove default settings*/
body { font-family:sans-serif; color:#333333; }/*clean up fonts*/
.homepage-carousel-info {
    /*pos*/
    bottom:0;
    right:0;
    margin:1em;/*add space*/
    min-width:300px;/*add room*/
}
.homepage-carousel-title, .homepage-carousel-subtitle, .homepage-carousel-link a { padding:10px; opacity:0.9; }
.homepage-carousel-subtitle { background-color:#666666; color:#333333; }
.homepage-carousel-title { background-color:#CCCCCC; color:#666666; text-transform:uppercase; letter-spacing:-1px; }
.homepage-carousel-link a { display:block; color:#EDEDED; text-decoration:none; text-transform:uppercase; text-align:center; font-weight:bold; text-shadow:0 0 5px #000000, 0 0 10px #666666; padding:20px; letter-spacing:3px; transition: all 0.12s ease-out; }
.homepage-carousel-link a:hover { background-color:#333333; color:#FFFFFF; padding:20px 10px; letter-spacing:4px; text-shadow:0 0 15px #000000, 0 0 20px #FFFFFF; }
.homepage-carousel-link a:before, .homepage-carousel-link a:after { font-size:2em; margin-top:-0.35em; }
.homepage-carousel-link a:before { content:"⇤"; float:left; }
.homepage-carousel-link a:after { content:"⇥"; float:right; }
.homepage-carousel-link a span { display:inline-block; }
.homepage-carousel-desc { background-color:#FFFFFF; color:#666666; padding:1em 10px; }