<div class="md-w-75pc mx-auto">
	<h2>サンプル1</h2>

	<select class="select select-dark focus-indigo border-indigo bg-indigo white">
		<option>選択してください</option>
		<option>韓国グルメさいころの旅</option>
		<option>ベトナム縦断カブの旅</option>
		<option>アメリカ横断の旅</option>
	</select>

	<h2 class="mt-10">サンプル2</h2>
	<div class="flex flex-row-reverse bg-gray-light">
		<div class="white bg-blue p-3 m-1">ここをキャンプ地とする</div>
		<div class="white bg-blue p-3 m-1">シカでした</div>
		<div class="white bg-blue p-3 m-1">嘉永6年</div>
	</div>

	<h2 class="mt-10">サンプル3</h2>
	<button class="button bg-blue in-progress">やぁやぁ鈴井...</button>

	<h2 class="mt-10">サンプル4</h2>
	<div class="blue-red">
		<span
			class="fs-l5 roboto fw-900 text-stroke-yellow text-fill-transparent underline-indigo underline-wavy ls-widest">ようこそ九州へ!</span>
	</div>
	<h2 class="mt-10">サンプル5</h2>

	<form class="">
		<div class="flex">
			<input type="text" class="input m-2 flex-equal" placeholder="名前">
			<input type="email" class="input m-2 flex-equal" placeholder="メアド">
		</div>
		<div class="flex">
			<input type="password" class="input m-2 flex-equal" placeholder="パスワード">
			<input type="password" class="input m-2 flex-equal" placeholder="もっかいパスワード">
		</div>
		<div class="flex">
			<button class="button m-2 w-100pc">ろぐいん</button>
		</div>
	</form>
</div>

External CSS

  1. https://cdn.jsdelivr.net/npm/shorthandcss@1.1.1/dist/shorthand.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.