Tab Components

Horizontal Tabs

Overview

Zeus is the sky and thunder god in ancient Greek religion, who rules as king of the gods on Mount Olympus.

His name is cognate with the first element of his Roman equivalent Jupiter.

Mythology

Zeus was the youngest child of Cronus and Rhea. In most traditions, he is married to Hera, by whom he is usually said to have fathered Ares, Hebe, and Hephaestus.

Worship

Zeus was worshipped throughout ancient Greece and beyond. Major cult centers included Olympia, Dodona, and Mount Lycaeon.

References

Homer's Iliad
Hesiod's Theogony
Apollodorus' Bibliotheca

<div class="tabs">
    <div class="tab-list" role="tablist">
        <button class="tab active" role="tab" data-tab="tab1">Tab 1</button>
        <button class="tab" role="tab" data-tab="tab2">Tab 2</button>
    </div>
    <div class="tab-content active" id="tab1" role="tabpanel">
        Content 1
    </div>
    <div class="tab-content" id="tab2" role="tabpanel">
        Content 2
    </div>
</div>

Vertical Tabs

Poseidon

God of the seas, earthquakes, and horses. One of the twelve Olympian deities.

Zeus

King of the gods, ruler of Mount Olympus, and god of the sky and thunder.

Hades

God of the underworld and the dead. Rules over the realm of Hades.

Athena

Goddess of wisdom, warfare, and handicraft. Patron deity of Athens.

<div class="tabs-vertical">
    <div class="tab-list-vertical" role="tablist">
        <button class="tab-vertical active" role="tab" data-tab="tab1">
            Tab 1
        </button>
    </div>
    <div class="tab-content-vertical">
        <div class="tab-content active" id="tab1" role="tabpanel">
            Content
        </div>
    </div>
</div>

Tabs with Icons

Information

General information about the deity, including their domain, attributes, and significance.

Family Tree

Relationships with other deities, including parents, siblings, consorts, and children.

Symbols

Sacred symbols, animals, and attributes associated with the deity.

Stories

Major myths and legends featuring this deity.

<button class="tab tab-with-icon active" role="tab" data-tab="tab1">
    <span class="tab-icon">📖</span>
    <span>Label</span>
</button>

Pill-Style Tabs

Greek Mythology

The body of myths originally told by the ancient Greeks.

Roman Mythology

The body of traditional stories pertaining to ancient Rome's legendary origins.

Norse Mythology

The body of myths of the North Germanic peoples.

Egyptian Mythology

The collection of myths from ancient Egypt.

<div class="tab-list-pills" role="tablist">
    <button class="tab-pill active" role="tab" data-tab="tab1">
        Tab 1
    </button>
</div>