JSFiddle - React, Tailwind, and code Playground
by Sergey khorev
HTML
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
<div data-cols="1" data-view1="1" data-view2="1" data-view3="1" data-view4="1" class="row-fluid"><div class="span bp0-col-1-1 bp1-col-1-1 bp2-col-1-1 bp3-col-1-1"><style>.m-hero .theme-dark h2{color:#fff}</style><section data-grid="container"><div class="m-hero dlc_mwftop" data-m="{"cN":"R1Hero 1","cT":"Module_hero","sN":1,"id":"R1Hero1"}"><div class="c-carousel f-multi-slide f-auto-play f-scrollable-next f-scrollable-previous theme-dark" aria-label="Рекомендуемые промопродукты и новинки: для переключения между слайдами используйте вкладки" data-js-interval="6000"><div class="c-group"><div class="c-sequence-indicator" role="tablist" aria-hidden="false"><button wcs.route="" wcs.ctrl="" type="button" aria-selected="true" aria-label="Просмотреть слайд 1" aria-controls="slide1" ms.title="nav" ms.index="0" ms.pgarea="body" ms.cmpgrp="hero" ms.cmpnm="hero" bi:ms.interactiontype="11" wcs.cot="5" data-m="{"cN":"View slide 1","bhvr":2,"sN":1,"containerName":"R1Hero 1","id":"R1Viewslide1"}" role="tab" tabindex="0" class="f-active"></button><button wcs.route="" wcs.ctrl="" type="button" aria-selected="false" aria-label="Просмотреть слайд 2" aria-controls="slide2" ms.title="nav" ms.index="1" ms.pgarea="body" ms.cmpgrp="hero" ms.cmpnm="hero" bi:ms.interactiontype="11" wcs.cot="5" data-m="{"cN":"View slide 2","bhvr":2,"sN":2,"containerName":"R1Hero 1","id":"R1Viewslide2"}" role="tab" tabindex="-1" class=""></button></div><button type="button" class="c-action-toggle c-glyph f-toggle glyph-pause" data-toggled-label="Приостановить слайд-шоу" data-toggled-glyph="glyph-pause" aria-label="Приостановить слайд-шоу"...