Разработка - Вкладки на одном CSS | Все для вебмастера

Пишем наш скелет на HTML:

HTML:

<!-- Inspired by https://dribbble.com/shots/3693442-Tabs -->

<!-- Illustrations: https://undraw.co/ -->
<main mv-app="tabs" mv-bar="no-login" mv-storage="https://github.com/DmitrySharabin/mavo-tabs-widget">
    <h2 property="headline"></h2>
    <section class="tabs" style="--count: [count(tab)];">
        <details property="tab" mv-multiple open="[open]" mv-action="set(open.$all, false), set(open, true)">
            <meta property="open">

            <summary property="title">
                <img class="icon" src="[image]" alt="Icon">
                <span property="text"></span>
            </summary>

            <section property="content">
                <h3 property="headline"></h3>
                <img property="image" src="" alt="Illustration for [headline]">
                <p property="text"></p>
                <a property="url" href="#">
                    <span property="destination"></span>
                </a>
            </section>
        </details>
    </section>
</main>

Придаем ему стиль:

CSS:

:root {
  --main-color: hsl(232, 47%, 56%);
  --main-color-accent: hsl(230, 58%, 30%);
  --text-color: hsl(208, 13%, 45%);
  --text-color-accent: hsl(235, 26%, 35%);
  --background-color: hsl(220, 38%, 97%);
  --line-color: hsl(249, 20%, 86%);
  --max-width: 60rem;
  --min-width: 45rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  min-width: var(--min-width);
  max-width: var(--max-width);
  min-height: 100vh;
  color: var(--text-color);
  background-color: var(--background-color);
  font-family: Helvetica, Arial, sans-serif;
}
body > p {
  margin: 1em 2em;
  text-align: center;
}

[mv-app] {
  min-width: var(--min-width);
  max-width: 90vw;
  background-color: white;
  border-radius: 0.5em;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 35px 2px -20px #e7e7ef;
}

[mv-app] > [property=headline] {
  margin: 0;
  padding: 1.1em 1em;
  text-align: center;
  color: var(--text-color-accent);
  border-bottom: 1px solid var(--line-color);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(var(--count, 5), minmax(8em, 1fr));
  grid-template-rows: auto auto;
}

details[property=tab] {
  display: contents;
}
details[property=tab][open] [property=content] {
  grid-column: 1/-1;
  width: auto;
}
details[property=tab]:not([open]) [property=title] {
  color: #8c90ab;
  background-color: #f5f7fa;
  border-bottom: 1px solid var(--line-color);
}
details[property=tab]:not([open]) [property=title] .icon {
  filter: grayscale(85%) opacity(45%);
}
details[property=tab]:not([open]) [property=content] {
  display: none;
}
details[property=tab]:first-child [property=title] {
  border-left: none;
}

[property=title] {
  grid-row: 1;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid var(--line-color);
  color: var(--main-color);
  text-align: center;
  list-style: none;
}
[property=title]::-webkit-details-marker {
  display: none;
}
[property=title] .icon {
  max-height: 5em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}
[property=title]:focus {
  outline: none;
}

[property=content] {
  grid-row: 2;
  padding: 3em 1em;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  grid-column-gap: 1.2em;
  grid-template-areas: "image headline" "image text" "image link";
}
[property=content] [property=image] {
  grid-area: image;
  max-width: 70%;
  max-height: 22em;
  margin: auto;
}
[property=content] [property=headline] {
  grid-area: headline;
  margin-bottom: 0.5em;
  color: var(--main-color);
  font-size: 170%;
}
[property=content] [property=headline]:not([mv-mode=edit]) {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, var(--main-color), var(--main-color-accent));
}
[property=content] [property=text] {
  grid-area: text;
  line-height: 1.5em;
}
[property=content] [property=url] {
  grid-area: link;
  align-self: center;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-top: 1.5em;
  padding: 0.7em 2em;
  color: white;
  background-image: linear-gradient(135deg, var(--main-color), var(--main-color-accent));
  border-radius: 999px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  font-size: 0.8em;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[property=content] [property=url]:hover {
  filter: brightness(135%);
}

[mv-app][mv-mode=edit] [property=open] {
  display: none;
}

footer {
  margin-top: 3em;
  text-align: center;
}
footer a {
  color: var(--main-color);
}

::-moz-focus-inner {
  border: 0;
}

Получаем такой результат:

Разработка Вкладки на одном CSS

Ещё ресурсы от baltun