JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/319042

by Lhankor_Mhy

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- タブメニュー -->
    <div class="tab-menu">
    </div>

    <!-- 各スライド -->
    <div class="swiper-container tab-content">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                contentテキスト１
            </div>
            <div class="swiper-slide">
                contentテキスト2
            </div>
            <div class="swiper-slide">
                contentテキスト3
            </div>
            <div class="swiper-slide">
                contentテキスト4
            </div>
        </div>
    </div>
    <!-- タブメニュー -->
    <div class="tab-menu">
    </div>

CSS

.tab-menu .swiper-pagination-bullet {
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    flex-grow: 1;
    opacity: 1;
    padding: 20px 0;
    position: relative;
    text-align: center;
    color: black;
    background-color: #dce9f5;
    cursor: pointer;
    border-right: 2px solid black;
    font-size: 0.9em; /*メニュー一覧のフォントの大きさ*/
    font-weight: bold;
    color: black;
}
.tab-menu .swiper-pagination-bullet:last-child {
    border: 0;
}
.tab-menu .swiper-pagination-bullet.swiper-pagination-bullet-active {
    color: brack;
    background-color: #f7f7f7;
}
.tab-content .swiper-wrapper .swiper-slide {
    box-sizing: border-box;
    display: block;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: white;
    padding: 0px 5px 5px; /*content内の文字の余白*/
}
.tab-menu {
    display: flex;
}

JavaScript

var tab = new Swiper('.tab-content', {
    //タブコンテンツ
    slidesPerView: 1,
    autoHeight: true,
    uniqueNavElements: false,
    pagination: {
        el: '.tab-menu',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">content' + (index + 1) + '</span>';
        }

    },

});