JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<!-- CSS transparent down-arrow -->
<div class="hero bg-one">
    <div class="wrapper table-middle">
        <div class="center-container wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur lorem nulla, ut venenatis augue porttitor eget. Donec et tortor purus. Mauris at erat arcu. Mauris laoreet fermentum quam, in mollis lectus feugiat eu. Maecenas tristique urna ut nulla tempus, at posuere eros semper.</p>
        </div>        
    </div>
</div>

<div class="arrow-down">
    <div class="left-end"></div>
    <div class="arrow">
         
    </div>
    <div class="right-end"></div>
</div>

CSS

body {
    color: red;
    font-family: Helvetica;
}
.hero {
	padding-top: 45px;
	background: 0 0 no-repeat;
	background-size: cover;

	width: 100%;
	height: 600px;
	position: fixed;
	top: 0;
	display: table;
}
.bg-one {
    background: url(http://lorempixel.com/640/480/sports/) 0 0 no-repeat;
    background-size: cover;
}

.wrapper {
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

.table-middle {
    vertical-align: middle;
    display: table-cell;
}

.center-container {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.arrow-down {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 30px;
}

.left-end, .right-end {
    float: left;
    height: 40px;
    width: 45%;
    background-color: blue;
}

.arrow {
    position:relative;
    float: left;
    width:9%;
    height: 40px;
}

.arrow:after {
    content: '\0020';
       
    position: absolute;
    left: 0;
    bottom: 0px;
    /* margin-left: -16px; */
    z-index: 5;
    width: 0;
    height: 0;
    
    border-left: 40px solid blue;
    border-right: 40px solid blue;
    border-top: 40px solid transparent;
}