tab | Notion

aaaa

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">

<head>
    <meta charset="UTF-8">
    <title>動物検索</title>
    <link rel="stylesheet" href="main-style.css" type="text/css">
</head>

<body>
    <div class="container add-control">
        <input type="radio" id="tab1" class="radio" name="tab" checked="checked"><label class="tab-title title1"
            for="tab1">未回答</label>
        <input type="radio" id="tab2" class="radio" name="tab"><label class="tab-title title2" for="tab2">作成物</label>
        <input type="radio" id="tab3" class="radio" name="tab"><label class="tab-title title3" for="tab3">tab3</label>
        <div class="tab-body">
            <div class="body1">
                <!-- <h1>未回答のアンケート</h1> -->
                 <ul class="card-display">
               <li ><a href=""><div class=image-wrapper ><img src="image.png" alt="ユニバ" > <div class="text-overlay">未回答のアンケート</div></div></a></li>
               <li ><a href=""><div class=image-wrapper ><img src="image.png" alt="ユニバ" > <div class="text-overlay">未回答のアンケート</div></div></a></li>
               <li ><a href=""><div class=image-wrapper ><img src="image.png" alt="ユニバ" > <div class="text-overlay">未回答のアンケート</div></div></a></li>
               <li ><a href=""><div class=image-wrapper ><img src="image.png" alt="ユニバ" > <div class="text-overlay">未回答のアンケート</div></div></a></li>
               <li ><a href=""><div class=image-wrapper ><img src="image.png" alt="ユニバ" > <div class="text-overlay">未回答のアンケート</div></div></a></li>
               <li ><a href=""><div class=image-wrapper ><img src="image.png" alt="ユニバ" > <div class="text-overlay">未回答のアンケート</div></div></a></li>
                <!-- <li class="card-display2"><a href="" >未回答のアンケート</a></li> -->

                <!-- <a href="" class="card-display">未回答のアンケート</a> -->
                 </ul>
            </div>
            <div class="body2">
                <h1>虫を検索</h1>
                <form method="get" action="/search">
                    <input type="text" name="keyword" placeholder="動物名" th:value="${keyword}">
                    <button type="submit">検索</button>
                </form>

                <div th:if="${animals}">
                    <h2>検索結果:</h2>
                    <ul>
                        <li th:each="animal : ${animals}" th:text="${animal.name + '（' + animal.type + '）'}"></li>
                    </ul>
                </div>
            </div>
            <div class="body3">body3 body3 body3</div>
        </div>
    </div>

</body>

</html>

/* .title1,
.body1 {
    border: 2px solid rgb(135, 136, 138);
}

.title2,
.body2 {
    border: 2px solid rgb(135, 136, 138);
}

.title3,
.body3 {
    border: 2px solid rgb(135, 136, 138);
} */

.tab-title {
    /* border-bottom: 2rem; */
    padding: .3em .5em;
    /* border-radius: .3em .3em 0 0; */
    /* text-align: center; */
    font-size: 2rem;
    /* display: table;  */
    display: flex;
    /* width: 100%; */
    /* background-color: #f3f3f3; */
}

.tab-body>div {
    width: 100%;
    height: 200px;
    border-radius: 0 .3em .3em .3em;
    padding: 1em;
}

/* radio non-display */
.container .radio {
    display: none;
    gap: 10px;
}

/* tabs position */
.container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.container::after {
    content: "";
    width: 90%;
}

.container .tab-title {
    position: relative;
    border-bottom: 2px solid transparent;
    top: 2px;
    left: 2px;
}

.container .tab-title:hover {
    cursor: pointer;
}

.container .tab-body {
    order: 1;
    width: 100%;
}

/* tab's body init */
.add-control .tab-body>div {
    display: none;
}

/* selected tab's color change */
.add-control .radio:checked+.tab-title {
    color: #4603fd;
    border-bottom-color: #4603fd;
}

.add-control #tab1:checked~.title1 {
    /* background: rgb(135, 136, 138); */
}

.add-control #tab2:checked~.title2 {
    /* background: rgb(135, 136, 138); */
}

.add-control #tab3:checked~.title3 {
    /* background: rgb(135, 136, 138); */
}

/* tabs control */
.add-control #tab1:checked~.tab-body>.body1 {
    display: flex;
}

.add-control #tab2:checked~.tab-body>.body2 {
    display: block;
}

.add-control #tab3:checked~.tab-body>.body3 {
    display: block;
}

.card-display {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    list-style: none;
    /* padding-left: 0; */
    /* width:fit-content;
    height:fit-content;
    gap: 10px;
    padding: 3rem 1rem 3rem 1rem;
    border-radius: 5px;
    background-color: aliceblue; */

}

.card-display2 {
    display: flex;
    min-width: fit-content;
    min-height: fit-content;
    gap: 10px;
    padding: 3rem 1rem 3rem 1rem;
    border-radius: 5px;
    background-color: aliceblue;
    margin: 1rem;
}

.text-overlay {
    position: absolute;
    bottom: 0px;
    /* 下に配置。topにすれば上に表示 */
    left: 0px;
    right: 0px;
    color: rgb(27, 27, 27);
    background-color: rgba(252, 252, 252, 0.6);
    /* 半透明背景で文字を読みやすく */
    padding: 10%  ;
    font-size: 1.2rem;
    border-radius: 7px 7px 0 0;
}

.image-wrapper {
    position: relative;
    display: flex;
    min-width: 100%;
}

.image-wrapper img {
    min-width: 100%;
    display: block;
}