JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper1">
	<img src="index.files/bg_center1.jpg" alt="" />
	<div id="head">
        <div id="my_scroll">
            <div class="main">
                <div id="1" style="display:block;"><a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"><img src="index.files/img1.png" alt="" /><span><p>11111 обвалил акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.</span></a></div>
                <div id="2"><a href="#"  class="big-link" data-reveal-id="myModal" data-animation="none"><img src="index.files/img2.png" alt="" /><span><p>2222 акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.</span></a></div>
                <div id="3"><a href="#"  class="big-link" data-reveal-id="myModal" data-animation="none"><img src="index.files/img3.png" alt="" /><span><p>3333 обвалил акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.</span></a></div>
                <div id="4"><a href="#"  class="big-link" data-reveal-id="myModal" data-animation="none"><img src="index.files/img4.png" alt="" /><span><p>4444 акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.</span></a></div>
                <div id="5"><a href="#"  class="big-link" data-reveal-id="myModal" data-animation="none"><img src="index.files/img5.png" alt="" /><span><p>5555 акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.</span></a></div>
            ...

CSS

#wrapper1 #my_scroll {z-index:5; height:480px; width:640px; position:absolute; top:-10px; left:12px;}
#wrapper1 #bloc_wrap {height:480px; width:640px; z-index:7; overflow:hidden;}
#wrapper1 #wrapper_sl {height:480px;}
#wrapper1 #wrapper_sl .block {width:150px; background:blue; border:2px solid #fff; position:absolute; margin:-40px 0 0 0; z-index:1;  height:108px; overflow:hidden; transition: all 1.2s linear ; -webkit-transition: all 1.2s linear ; -moz-transition: all 1.2s linear ; -webkit-border-radius: 15px; -moz-border-radius: 15px; zoom: 1; border-radius: 15px;  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}
#wrapper1 #wrapper_sl .block img {border:0px solid #FFF; height:108px; cursor:pointer; margin:0 0 0 -16px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
#wrapper1 #my_scroll .main {position:relative;}
#wrapper1 #my_scroll .main div {display:none; background:green; position:absolute; z-index:5; top:74px; left:78px;}
#wrapper1 #my_scroll .main div a {display:block; position:relative; width:560px; height:350px; border:solid 1px #000000; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; overflow:hidden; color:#ffffff; text-decoration:none;}
#wrapper1 #my_scroll .main div a .shadow {position:absolute; top:0; left:0;}
#wrapper1 #my_scroll .main div span {display:block; position:absolute; z-index:7; bottom:0; right:0; padding:10px 15px 13px 145px; width:400px; text-align:right; background:url(../index.files/img_bg.png) repeat-x top; font-size:13px; line-height:16px;}
#wrapper1 #my_scroll .main div span p {font-size:18px; line-height:24px; margin:0; height:24px; overflow:hidden;}
#wrapper1 #my_scroll .main div a:hover span p {text-decoration:underline;}
#info {width:300px; height:200px; position:fixed; right:0; top:0; background:white;}

JavaScript

var docheight = $("#my_scroll").outerHeight();
var docwidth = $(window).width(); 
// Slider "circular motion" Drew - magart.com.ua START
var myDiv = document.getElementById("bloc_wrap");
var ImgDiv = $("#wrapper_sl").find(".block");
var ImgLink = $("#wrapper_sl").find(".block a");
var $size_dug=230;//radius
var $smes_x=230;
var $smes_y=docheight-$size_dug-17;
var $kolvo=14; //kolichestvo blokov
var $skorost=200; //cem bolshe tem medlennei (dilitel skorosti)
var $ugol=(2*Math.PI/$kolvo);
var $start_pr=0;
var $global_v=0;

var main=$('#my_scroll').find('.main');
main.find("div").find("a").append('<img src="index.files/shadow.png" alt="" border="0" class="shadow" />');

$(ImgLink).click(function(){
	var ImgRel = $(this).attr('rel');
	main.find('div').fadeOut(100);
	$('#my_scroll .main '+ImgRel).fadeIn(250);
});

function sec1() {
								$global_v=$global_v+10;							
								$nowz=(($global_v+$start_pr)/$skorost)+$ugol*2;
								for (var ink=0, len = $kolvo; ink < len; ink++)
								{
								uno1=$(ImgDiv[ink]);
								$rad1=((ink+1)*$ugol+$nowz);
								$deg1=$rad1*360/(2*Math.PI)+270;
								trata = Math.sin(-($rad1))*$size_dug+$smes_x;
								if(trata>260){
								zind=1;
								}else{
								zind=10;
								}
								uno1.css({top: Math.cos($rad1)*$size_dug+$smes_y, left: trata, zIndex: zind, transform:'skewX(-'+$deg1+'deg) rotateX('+$deg1+'deg)', '-moz-transform': 'skewX(-'+$deg1+'deg) rotateX('+$deg1+'deg)', '-webkit-transform': 'skewX(-'+$deg1+'deg) rotateX('+$deg1+'deg)'});
								};	

  						}

// Slider "circular motion" Drew - magart.com.ua END	

sec1();				

var setintr1=setInterval(sec1,1100);

$(ImgDiv).mouseenter(function() {	 clearInterval(setintr1);})
				.mouseleave(function() {
					setintr1=setInterval(sec1,1100);
		});		



// Slider "circular motion" Drew - magart.com.ua END