JSFiddle - React, Tailwind, and code Playground

by Gisele Lima

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row">
      <div class="col-md-12">header</div>
    </div>
    <div class="row">
      <div class="col-md-2">sidebar</div>

      <div class="col-md-10" style="text-align:center">
          

         <div class="arrows"> 
         <div class="left"></div>
         <div class="right"></div>
         </div>

          
          <img src="http://lorempixel.com/500/500/sports/">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac risus posuere lacus blandit interdum. Etiam arcu sem, aliquam in condimentum non, tristique a massa. Aliquam efficitur lacus egestas, imperdiet odio sed, volutpat lorem. Vestibulum fringilla vitae ipsum at accumsan. Nulla varius mi velit, eu viverra neque blandit quis. Pellentesque vel mi quis ante volutpat maximus in ultrices ligula. In congue, nulla sit amet ornare suscipit, erat ex aliquet risus, ac tincidunt erat nunc sit amet leo. Donec eleifend scelerisque euismod.

Sed luctus massa dolor, a tincidunt felis egestas non. Donec varius cursus elementum. Mauris at imperdiet risus. Sed et rhoncus arcu. Proin hendrerit ultricies accumsan. Curabitur eget quam et lectus tempus consectetur eu vitae erat. Suspendisse potenti. Nulla tincidunt sodales luctus. Donec id odio at libero vulputate rhoncus. Maecenas mattis posuere dolor a tempor. In sed lorem in mauris egestas pharetra. Praesent sodales iaculis massa ut semper. In non laoreet lacus, in mattis nibh. Praesent bibendum, orci id pharetra rutrum, arcu ligula tempus diam, a sagittis est metus auctor arcu. Morbi fringilla imperdiet est, nec auctor lorem luctus ut.

Nulla magna sem, ultricies at ex at, elementum tristique nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque laoreet nulla elementum, accumsan mauris non, tristique felis. Ut varius turpis purus, vitae dapibus nibh mattis a. Vivamus...

CSS

.arrows {
  position: fixed;
  width: 80%;
  padding: 10px;
  z-index: 999;
}

.left, .right {
   position: absolute;
   width: 0px;
   height: 0px;
   border: 15px solid transparent;
}

.left { border-right-color: red; left: 10px; }
.right { border-left-color: green; right: 10px; }