diff --git a/test.css b/test.css new file mode 100644 index 0000000..b3a11c8 --- /dev/null +++ b/test.css @@ -0,0 +1,33 @@ +.tabs { +display: flex; +flex-wrap: wrap; +} +.tabs > input { +display: none; +} +.tabs > input:checked + label + div { +display: block; +} +.tabs > label { +order: 1; +} +.tabs > div { +display: none; +flex-basis: 100%; +order: 2; +} + +/**/ + +.tabs { +border: 1px solid; +} +.tabs > input:checked + label { +background-color: gray; +} +.tabs > label { +padding: 10px; +} +.tabs > div { +padding: 10px; +} diff --git a/test.html b/test.html new file mode 100644 index 0000000..6b06224 --- /dev/null +++ b/test.html @@ -0,0 +1,74 @@ + + + + + + + + + +
+ + +

Tabs

+ + + +
+ + +
+ + +
+
+ + +
Tab: One / One
+ + +
Tab: One / Two
+ + +
Tab: One / Three
+
+
+ + +
+
+ + +
Tab: Two / One
+ + +
Tab: Two / Two
+ + +
Tab: Two / Three
+
+
+
+ + + + +