JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div id="demo" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="row rss_ticker carousel-item m-0">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="rss-item-box"></div>
        <div class="rss_block item_1">
          <div class="rss_date">03<br><span>Jan</span></div>
          <div class="rss_img" style="background-image: url(https://www.ghanagrio.com/thumbnail.php?file=&size=article_large);"></div>
          <div class="rss_text">
            <h2><a href="https://www.ghanagrio.com/news/556551-investors-battle-to-swallow-absa-s-road-to-recovery-tale.html">Investors battle to swallow Absa's road to recovery tale</a></h2>
            <h3>Posted on 03 Jan 2019</h3>Business News of Thursday, 3 January 2019 Source: Myjoyonline.com File photo Absa Group Ltd. is having a hard time convincing some...</div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="rss-item-box"></div>
        <div class="rss_block item_2">
          <div class="rss_date">21<br><span>Dec</span></div>
          <div class="rss_img" style="background-image: url(https://i1.wp.com/www.enterprisenetwork.africa/wp-content/uploads/2018/12/A2X.jpg?fit=800%252C600&ssl=1);"></div>
          <div class="rss_text">
            <h2><a href="https://www.enterprisenetwork.africa/a2x-markets-wins-over-south-african-internet-giant-naspers/">A2X Markets Wins over South African...

CSS

.rss_block {
     position: relative;
   }

   .rss_date {
     font-size: 15px;
     display: block;
     background: green;
     color: white;
     position: absolute;
     top: 10px;
     right: 10px;
     width: 38px;
     text-align: center;
     padding: 2px 4px 10px;
     z-index: 10;
   }

   .rss_date span {
     font-size: 10px;
     line-height: 4px;
     text-transform: uppercase;
   }

   .rss_img {
     display: block;
     height: 180px;
     background: black;
     position: relative;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
   }

   .rss_text {
     display: block;
     padding: 18px;
     background: white;
     font-size: 12px;
   }

   .rss_text h2 {
     color: green;
   }

   .rss_text h3 {
     color: red;
   }

   body {
     background: gray;
   }

JavaScript

$(document).ready(function() {
  $('.carousel-item:first-of-type').addClass('active');
});