JSFiddle - React, Tailwind, and code Playground
by crucify
HTML
<link rel="stylesheet" href="./cleanfore/reset.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<style>
.all_set {
width: 100%;
display: flex;
justify-content: flex-end;
}
.all_box {
width: 90%;
}
.slidearea {
width: 100%;
display: flex;
justify-content: flex-end;
}
.swiper01 {
position: relative;
margin: 0;
width: 1500px;
display: flex;
justify-content: flex-end;
overflow: hidden;
}
.TheWork {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.workslide {
font-size: 18px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.workslide p {
line-height: 1.4;
}
.taptitle {
position: static;
display: flex;
width: 1500px !important;
justify-content: flex-start;
margin-bottom: 16px;
}
.swiper-pagination-bullet {
width: 120px;
min-height: 30px;
background: transparent;
opacity: 1;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 !important;
}
.swiper-pagination-bullet-active {
font-weight: bold;
color: darkslategray;
}
.workslide img {
width: 100%;
height: 400px;
object-fit: cover;
}
.taparea {
width: 100%;
display: flex;
justify-content: flex-end;
color: #aaa;
}
@media all and (max-width: 767px) {
.taparea {
overflow-x: auto;
display: block;
}
.taptitle {
width: 550px !important;
}
.swiper-pagination-bullet {
width: 100px;
...