rotala-theme-default-light
Version:
a light theme for rotala.css framework
1,370 lines (1,258 loc) • 80.8 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" href="//unpkg.com/tailwindcss@%5E1.0/dist/tailwind.min.css">
<link rel="stylesheet" href="assets/css/theme.css">
<title>Rotala Theme Default Light</title>
</head>
<body class="max-w-6xl w-full mt-20 mx-auto px-8">
<main>
<h1>
Rotala Theme Default Light<br>
<p class="text-xl text-gray-700">A light theme for rotala.css</p>
</h1>
<br>
<br>
<h2>Color Palette</h2>
<hr class="divider">
<br>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Black & White</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-white shadow-inner m-1 rounded-full"></div>
#fff
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-black shadow-inner m-1 rounded-full"></div>
#000
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Primary</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-primary-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Secondary</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-secondary-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Gray</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-gray-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Red</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-red-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Orange</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-orange-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Yellow</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-yellow-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Green</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-green-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Teal</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-teal-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Blue</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-blue-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Indigo</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-indigo-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Purple</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-purple-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Pink</h4>
<div class="w-full md:w-2/3">
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-100 shadow-inner m-1 rounded-full"></div>
100
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-200 shadow-inner m-1 rounded-full"></div>
200
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-300 shadow-inner m-1 rounded-full"></div>
300
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-400 shadow-inner m-1 rounded-full"></div>
400
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-500 shadow-inner m-1 rounded-full"></div>
500
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-600 shadow-inner m-1 rounded-full"></div>
600
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-700 shadow-inner m-1 rounded-full"></div>
700
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-800 shadow-inner m-1 rounded-full"></div>
800
</div>
<div class="inline-block text-center p-2 text-sm text-gray-700">
<div class="h-8 w-8 bg-pink-900 shadow-inner m-1 rounded-full"></div>
900
</div>
</div>
</section>
<h2>Font</h2>
<hr class="divider">
<br>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Family</h4>
<div class="w-full md:w-2/3">
<p>system-ui</p>
<p>-apple-system</p>
<p>BlinkMacSystemFont</p>
<p>"Segoe UI"</p>
<p>Roboto</p>
<p>"Helvetica Neue"</p>
<p>Arial</p>
<p>"Noto Sans"</p>
<p>sans-serif</p>
<p>"Apple Color Emoji"</p>
<p>"Segoe UI Emoji"</p>
<p>"Segoe UI Symbol"</p>
<p>"Noto Color Emoji"</p>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Style</h4>
<div class="w-full md:w-1/3">
<h6>weight</h6>
<div class="w-full md:w-1/2 font-hairline mb-8">
hairline <sup>100</sup>
</div>
<div class="w-full md:w-1/2 font-thin mb-8">
thin <sup>200</sup>
</div>
<div class="w-full md:w-1/2 font-light mb-8">
light <sup>300</sup>
</div>
<div class="w-full md:w-1/2 font-normal mb-8">
normal <sup>400</sup>
</div>
<div class="w-full md:w-1/2 font-medium mb-8">
medium <sup>500</sup>
</div>
<div class="w-full md:w-1/2 font-semibold mb-8">
semibold <sup>600</sup>
</div>
<div class="w-full md:w-1/2 font-bold mb-8">
bold <sup>700</sup>
</div>
<div class="w-full md:w-1/2 font-extrabold mb-8">
extrabold <sup>800</sup>
</div>
<div class="w-full md:w-1/2 font-black mb-8">
black <sup>900</sup>
</div>
</div>
<div class="w-full md:w-1/3">
<h6>italic</h6>
<div class="w-full md:w-1/2 font-hairline italic mb-8">
hairline italic
</div>
<div class="w-full md:w-1/2 font-thin italic mb-8">
thin italic
</div>
<div class="w-full md:w-1/2 font-light italic mb-8">
light italic
</div>
<div class="w-full md:w-1/2 font-normal italic mb-8">
normal italic
</div>
<div class="w-full md:w-1/2 font-medium italic mb-8">
medium italic
</div>
<div class="w-full md:w-1/2 font-semibold italic mb-8">
semibold italic
</div>
<div class="w-full md:w-1/2 font-bold italic mb-8">
bold italic
</div>
<div class="w-full md:w-1/2 font-extrabold italic mb-8">
extrabold italic
</div>
<div class="w-full md:w-1/2 font-black italic mb-8">
black italic
</div>
</div>
</section>
<h2>Typography</h2>
<hr class="divider" />
<br>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Headings</h4>
<div>
<h1>h1. Heading <span class="rounded py-px px-2 text-gray-700 bg-gray-300">40px</span></h1>
<h2>h2. Heading <span class="rounded py-px px-2 text-gray-700 bg-gray-300">32px</span></h2>
<h3>h3. Heading <span class="rounded py-px px-2 text-gray-700 bg-gray-300">28px</span></h3>
<h4>h4. Heading <span class="rounded py-px px-2 text-gray-700 bg-gray-300">24px</span></h4>
<h5>h5. Heading <span class="rounded py-px px-2 text-gray-700 bg-gray-300">20px</span></h5>
<h6>h6. Heading <span class="rounded py-px px-2 text-gray-700 bg-gray-300">16px</span></h6>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Paragraph</h4>
<p class="w-full md:w-1/3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Address</h4>
<address>
<strong>Rotala, Inc.</strong>
<div>Green Office</div>
<div>1-1 Alpha, Beta, Somewhere</div>
<div>+00-11-2222-3333 (Main)</div>
<i>first.last@example.com</i>
</address>
</section>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Semantic Elements</h4>
<div class="w-1/2 md:w-1/3">
<div class="m-2">
<abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code>
</div>
<div class="m-2">
<strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code>
</div>
<div class="m-2">
<cite>Citation</cite><code class="ml-2">cite</code>
</div>
<div class="m-2">
<code>Hello World!</code><code class="ml-2">code</code>
</div>
<div class="m-2">
<del>Deleted</del><code class="ml-2">del</code>
</div>
<div class="m-2">
<em>Emphasis</em><code class="ml-2">em</code>
</div>
<div class="m-2">
<i>Italic</i><code class="ml-2">i</code>
</div>
<div class="m-2">
<ins>Inserted</ins><code class="ml-2">ins</code>
</div>
<div class="m-2">
<kbd>Ctrl + S</kbd><code class="ml-2">kbd</code>
</div>
</div>
<div class="w-1/2 md:w-1/3">
<div class="m-2">
<mark>Highlighted</mark><code class="ml-2">mark</code>
</div>
<div class="m-2">
<ruby>漢
<rt>kan</rt>字
<rt>ji</rt>
</ruby><code class="ml-2">ruby</code>
</div>
<div class="m-2">
<s>Strikethrough</s><code class="ml-2">s</code>
</div>
<div class="m-2">
<samp>Sample</samp><code class="ml-2">samp</code>
</div>
<div class="m-2">
Text <sub>Subscripted</sub><code class="ml-2">sub</code>
</div>
<div class="m-2">
Text <sup>Superscripted</sup><code class="ml-2">sup</code>
</div>
<div class="italic m-2">
Text italic
</div>
<div class="m-2">
<u>Underline</u><code class="ml-2">u</code>
</div>
<div class="m-2">
<var>x</var> =
<var>y</var> + 2<code class="ml-2">var</code>
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Code</h4>
<pre class="w-full md:w-2/3" data-lang="HTML"><code><span class=""><!-- code snippets --></span>
<kbd>F12</kbd>
<span><p></span><span>This is an example</span><span></p></span>
<span><a></span><span>This is an example</span><span></a></span>
<span><span></span><span>This is an example</span><span></span></span>
<span><b></span><span>This is an example</span><span></b></span>
</code></pre>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">List</h4>
<div class="w-full md:w-1/3 mb-8">
<ul>
<h6>Unordered List</h6>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</div>
<div class="w-full md:w-1/3 mb-8">
<ol>
<h6>Ordered List</h6>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Sub-Item 1</li>
<ol>
<li>Sub-Item 1</li>
</ol>
</ol>
</li>
<li>Item 3</li>
</ol>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Description List</h4>
<div>
<dl>
<dt>Item 1</dt>
<dd>Description for Item 1</dd>
<dt>Item 2</dt>
<dd>Description for Item 2</dd>
<dt>Item 3</dt>
<dd>Description for Item 3</dd>
</dl>
</div>
</section>
<h2>Components</h2>
<hr class="divider" />
<br>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Accordion</h4>
<div class="accordion w-full md:w-1/3 mb-8">
<h6>checkbox accordion with indicator</h6>
<label for="accordion-0">
<input class="accordion-indicator" id="accordion-0" type="checkbox" name="accordion-checkbox" hidden="">
<span class="accordion-header">
<span class="accordion-icon icon icon-chevron-right icon-combo text-sm"></span>
One
</span>
<div class="accordion-body">
<ul class="menu plain">
<li class="menu-item">
<a href="#accordions">item 1</a>
</li>
<li class="menu-item">
<a href="#accordions">item 2</a>
</li>
</ul>
</div>
</label>
<label for="accordion-1">
<input class="accordion-indicator" id="accordion-1" type="checkbox" name="accordion-checkbox" hidden="">
<span class="accordion-header">
<span class="accordion-icon icon icon-chevron-right icon-combo text-sm"></span>
Two
</span>
<div class="accordion-body">
<ul class="menu plain">
<li class="menu-item">
<a href="#accordions">item 1</a>
</li>
<li class="menu-item">
<a href="#accordions">item 2</a>
</li>
</ul>
</div>
</label>
</div>
<div class="accordion w-full md:w-1/3 mb-8">
<h6>radio accordion with indicator</h6>
<label for="accordion-2">
<input class="accordion-indicator" id="accordion-2" type="radio" name="accordion-radio" hidden="">
<span class="accordion-header">
<span class="accordion-icon icon icon-chevron-right icon-combo text-sm"></span>
One
</span>
<div class="accordion-body">
<ul class="menu plain">
<li class="menu-item">
<a href="#accordions">item 1</a>
</li>
<li class="menu-item">
<a href="#accordions">item 2</a>
</li>
</ul>
</div>
</label>
<label for="accordion-3">
<input class="accordion-indicator" id="accordion-3" type="radio" name="accordion-radio" hidden="">
<span class="accordion-header">
<span class="accordion-icon icon icon-chevron-right icon-combo text-sm"></span>
Two
</span>
<div class="accordion-body">
<ul class="menu plain">
<li class="menu-item">
<a href="#accordions">item 1</a>
</li>
<li class="menu-item">
<a href="#accordions">item 2</a>
</li>
</ul>
</div>
</label>
</div>
</section>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Avatar</h4>
<div class="w-full md:w-2/3 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>avatar initial</h6>
<figure class="avatar bg-gray-300" data-initial="Hi"></figure>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>avatar image</h6>
<figure class="avatar">
<img class="bg-pink-200" src="assets/img/avatar-1.svg" alt="Avatar" />
</figure>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>avatar initial rounded</h6>
<figure class="avatar avatar-rounded bg-gray-300" data-initial="Hi"></figure>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>avatar image rounded</h6>
<figure class="avatar avatar-rounded">
<img class="bg-blue-200" src="assets/img/avatar-2.svg" alt="Avatar" />
</figure>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>avatar status</h6>
<figure class="avatar avatar">
<img class="bg-blue-200" src="assets/img/avatar-2.svg" alt="Avatar" />
<span class="avatar-status bg-primary-600"></span>
</figure>
<figure class="avatar avatar-rounded">
<img class="bg-blue-200" src="assets/img/avatar-2.svg" alt="Avatar" />
<span class="avatar-status bg-primary-600"></span>
</figure>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>avatar icon status</h6>
<figure class="avatar avatar">
<img class="bg-blue-200" src="assets/img/avatar-2.svg" alt="Avatar" />
<img class="avatar-icon bg-yellow-300" src="assets/img/avatar-5.svg" alt="" />
</figure>
<figure class="avatar avatar-rounded">
<img class="bg-blue-200" src="assets/img/avatar-2.svg" alt="Avatar" />
<img class="avatar-icon bg-yellow-300" src="assets/img/avatar-5.svg" alt="" />
</figure>
</div>
</div>
</section>
<section class="flex flex-wrap mb-16">
<h4 class="w-full md:w-1/3">Badge</h4>
<div class="w-full md:w-2/3 mb-8 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>status badge</h6>
<button class="button button-outline badge">
status
<span class="badge-status bg-primary-600"></span>
</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>text badge</h6>
<button class="button button-outline badge">
text
<span class="badge-text bg-primary-600">great!</span>
</button>
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Breadcrumb</h4>
<div class="w-full md:w-1/3 mb-8">
<h6>default</h6>
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Mypage</a>
</li>
<li class="breadcrumb-item active">
<a href="#">Setting</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/3 mb-8">
<h6>disabled</h6>
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a class="link disabled" href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a class="link disabled" href="#">Mypage</a>
</li>
<li class="breadcrumb-item">
<a class="link disabled" href="#" disabled>Setting</a>
</li>
</ul>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Button</h4>
<div class="w-full md:w-2/3 mb-8 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>default</h6>
<button class="button">button</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>disabled</h6>
<button class="button disabled" disabled>button</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>outline</h6>
<button class="button button-outline">button</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>outline disabled</h6>
<button class="button button-outline disabled" disabled>button</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>primary</h6>
<button class="button button-primary">button</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>primary disabled</h6>
<button class="button button-primary disabled" disabled>button</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>secondary</h6>
<button class="button button-secondary">button</button>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>secondary disabled</h6>
<button class="button button-secondary disabled" disabled>button</button>
</div>
</div>
</section>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Checkbox</h4>
<div class="w-full md:w-2/3 mb-8 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>default</h6>
<label class="checkbox">
<input type="checkbox" value="1" name="check_0" hidden checked />
<i class="checkbox-icon"></i>
Check 1
</label>
<label class="checkbox">
<input type="checkbox" value="2" name="check_0" hidden />
<i class="checkbox-icon"></i>
Check 2
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>disabled</h6>
<label class="checkbox disabled">
<input type="checkbox" value="1" name="check_1" hidden disabled checked />
<i class="checkbox-icon"></i>
Check 1
</label>
<label class="checkbox disabled">
<input type="checkbox" value="2" name="check_1" hidden disabled />
<i class="checkbox-icon"></i>
Check 2
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>indeterminate</h6>
<label class="checkbox">
<input id="indeterminate_checkbox_1" class="indeterminate" type="checkbox" value="1" name="check_0" hidden onclick="this.classList.remove('indeterminate')" />
<i class="checkbox-icon"></i>
Check 1
</label>
<label class="checkbox">
<input id="indeterminate_checkbox_2" type="checkbox" value="2" name="check_0" hidden />
<i class="checkbox-icon"></i>
Check 2
</label>
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Drawer</h4>
<div class="w-full md:w-2/3 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>left</h6>
<button class="button button-primary m-4" onclick="toggleDrawer('left')">open left drawer</button>
<div class="drawer drawer-left" id="drawer-left" onclick="toggleDrawer('left')">
<div class="drawer-container" onclick="stop(event)">
<div>
This is a drawer
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>right</h6>
<button class="button button-primary m-4" onclick="toggleDrawer('right')">open right drawer</button>
<div class="drawer drawer-right" id="drawer-right" onclick="toggleDrawer('right')">
<div class="drawer-container" onclick="thisstop(event)">
<div>
This is a drawer
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>top</h6>
<button class="button button-primary m-4" onclick="toggleDrawer('top')">open top drawer</button>
<div class="drawer drawer-top" id="drawer-top" onclick="toggleDrawer('top')">
<div class="drawer-container" onclick="stop(event)">
<div>
This is a drawer
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>bottom</h6>
<button class="button button-primary m-4" onclick="toggleDrawer('bottom')">open bottom drawer</button>
<div class="drawer drawer-bottom" id="drawer-bottom" onclick="toggleDrawer('bottom')">
<div class="drawer-container" onclick="stop(event)">
<div>
This is a drawer
</div>
</div>
</div>
</div>
</div>
<script>
function toggleDrawer(position) {
this.event.stopPropagation();
var id = 'drawer-' + position;
var drawer = document.getElementById(id);
drawer.classList.contains('open')
? drawer.classList.remove('open')
: drawer.classList.add('open');
}
</script>
</section>
<br>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Divider</h4>
<div class="w-full md:w-2/3 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>default</h6>
<br>
<br>
<span class="divider"></span>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>vertical</h6>
<br>
<br>
<span class="flex w-full justify-around">
<div>left</div>
<div class="divider divider-vertical"></div>
<div>right</div>
</span>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>horizontal content</h6>
<br>
<br>
<div class="divider" data-content="Hi"></div>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>vertical content</h6>
<br>
<br>
<div class="text-center">
<div class="inline mx-2">left</div>
<div class="inline divider divider-vertical" data-content="or"></div>
<div class="inline mx-2">right</div>
</div>
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Input</h4>
<div class="w-full md:w-2/3 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>input default</h6>
<label class="input-group w-64">
<input class="input" type="text" placeholder="input something here">
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>input disabled</h6>
<label class="input-group w-64">
<input class="input disabled" type="text" placeholder="disabled input" disabled>
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>textarea default</h6>
<label class="input-group w-64">
<textarea class="input" type="text" placeholder="input something here"></textarea>
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>textarea disabled</h6>
<label class="input-group w-64">
<textarea class="input disabled" type="text" placeholder="input something here" disabled></textarea>
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>input outline</h6>
<label class="input-group w-64">
<input class="input input-outline" type="text" placeholder="input something here">
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>input outline disabled</h6>
<label class="input-group w-64">
<input class="input input-outline disabled" type="text" placeholder="input something here" disabled>
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>textarea outline</h6>
<label class="input-group w-64">
<textarea class="input input-outline" type="text" placeholder="input something here"></textarea>
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>textarea outline disabled</h6>
<label class="input-group w-64">
<textarea class="input input-outline disabled" type="text" placeholder="input something here" disabled></textarea>
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>input with label</h6>
<label class="input-group w-64 my-8">
<input class="input input-outline" type="text" placeholder="input something here">
<span class="input-label">a label</span>
</label>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>textarea with label</h6>
<label class="input-group w-64 my-8">
<textarea class="input input-outline" type="text" placeholder="input something here"></textarea>
<span class="input-label">a label</span>
</label>
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Link</h4>
<div class="w-full md:w-2/3 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>default</h6>
<a href="#" class="link">link</a>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>disabled</h6>
<a href="#" class="link disabled" disabled>link</a>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>underline</h6>
<a href="#" class="link link-underline">link</a>
</div>
<div class="w-full md:w-1/2 mb-8">
<h6>underline disabled</h6>
<a href="#" class="link link-underline disabled" disabled>link</a>
</div>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Menu</h4>
<div class="w-full md:w-1/3">
<h6>default</h6>
<ul class="menu">
<li class="menu-item">
<a class="link" href="#first">First</a>
</li>
<li class="menu-item">
<a class="link" href="#second">Second</a>
</li>
<li class="menu-item">
<a class="link" href="#third">Third</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/3">
<h6>disabled</h6>
<ul class="menu">
<li class="menu-item disabled">
<a href="#first">First</a>
</li>
<li class="menu-item disabled">
<a href="#second">Second</a>
</li>
<li class="menu-item disabled">
<a href="#third">Third</a>
</li>
</ul>
</div>
</section>
<section class="flex flex-wrap mb-8">
<h4 class="w-full md:w-1/3">Modal</h4>
<div class="w-full md:w-2/3 flex flex-wrap">
<div class="w-full md:w-1/2 mb-8">
<h6>default</h6>
<button class="button" onclick="toggleModal('default')">open default modal</button>
<div class="modal" id="modal-default" onclick="toggleModal('default')">
<div class="modal-container" onclick="event.stopPropagation()">
<div class="modal-head">
<h3>Default Modal</h3>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, cons