JSFiddle - React, Tailwind, and code Playground
by moku23
HTML
<html><head><script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css">
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<style>
.swiper-container {
width: 100%;
height: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: auto;
height: auto;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.badge-vip {
position: absolute;
top: 1px;
right: 1px;
z-index: 10;
width: 30px;
height: 30px;
}
.swiper-wrapper { display: block}
.swiper-slide { width: 100%; height: auto; }
.fancybox-container { z-index:9999999999; }
.fancybox-content { padding:26px; }
.fancybox-infobar { display:none; }
.fancybox-slide--html { padding: 0px; }
.fancybox-progress { height:4px; }
.fancybox-button--arrow_left, .fancybox-button--arrow_right { background: none;}
.story { display:none; position:relative; height:100%; width:100%; z-index:999999999999999; background-color:#000; color:#fff; background-size:cover; background-position:center center; background-repeat:no-repeat; }
.story .distance_km { font-size:15px; font-weight:bold; padding:6px 10px; display:inline-block; background-color: rgb(32, 190, 32); color:#FFFFFF; border-radius:9px; }
...