JSFiddle - React, Tailwind, and code Playground

by Christian Mueller

HTML

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.1.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.1.4/assets/owl.theme.default.css">
<script src="https://cdn.bootcss.com/OwlCarousel2/2.1.4/owl.carousel.js"></script>
<div ng-app="myApp" ng-controller="newsController" class="owl-carousel">
  <div class="item" ng-repeat="news in allData">
    <div class="news-1">
      <div class="body">
        <p>{{ news.news}}</p>
        <div class="title">{{news.news_date}}</div>
      </div>
    </div>
  </div>
</div>

CSS

.item {
    width: 185px;
}

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

JavaScript

// the main (app) module
    var app = angular.module("myApp", []);

    // add a controller
    app.controller("newsController",function($http,$scope,$log, $httpParamSerializerJQLike){
        var returnData = '[{"news":"news1","news_date":"2017-09-14"},          {"news":"news2","news_date":"2017-09-14"},{"news":"news3","news_date":"2017-09-14"},{"news":"news4","news_date":"2017-09-14"}]';
        
        var data = $httpParamSerializerJQLike({
            json: returnData
        });
        
        var news = function() {
          $http({
          		method: "POST",
              url: "/echo/json/",
              datatype: "json",
              data: data
              }, data).then(function (data) {
              	$log.log(data);
            		$scope.allData = data.data;
          		},function(data) {
              	$log.log("Error has occured!");
              });
        };       
        news();
        
    });