Skip to content

Instantly share code, notes, and snippets.

@cnguyen-de
Created November 29, 2021 16:09
Show Gist options
  • Save cnguyen-de/d70ec6d9c245545575b989f35f0dd311 to your computer and use it in GitHub Desktop.
Save cnguyen-de/d70ec6d9c245545575b989f35f0dd311 to your computer and use it in GitHub Desktop.
Reusable template and behavior
<div class="flex flex-row">
<div class="flex flex-col">
<div class="w-96 relative p-8 shadow-md rounded-md m-8">
<div class="header flex flex-row items-center">
<span class="uppercase tracking-wider text-gray-600">shipping address</span>
<span class="flex-grow"></span>
<button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
</div>
<div class="content mt-4 leading-relaxed text-gray-800">
<p class="">Chi Nguyen</p>
<p class="">A really really long name-Straße 1</p>
<p class="">60313 Germany</p>
</div>
</div>
<div class="w-96 relative p-8 shadow-md rounded-md m-8">
<div class="header flex flex-row items-center">
<span class="uppercase tracking-wider text-gray-600">shipping address</span>
<span class="flex-grow"></span>
<button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div class="content mt-4 leading-relaxed flex flex-col space-y-4">
<input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Name" />
<input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Street & Number" />
<input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="ZIP Code" />
<input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Country" />
<div class="flex flex-row">
<button class="px-4 py-2 bg-gradient-to-r from-sky-500 to-teal-500 text-white rounded-md">Save</button>
</div>
</div>
</div>
</div>
<div class="flex flex-col">
<div class="w-96 relative p-8 shadow-md rounded-md m-8">
<div class="header flex flex-row items-center">
<span class="uppercase tracking-wider text-gray-600">payment information</span>
<span class="flex-grow"></span>
<button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
</div>
<div class="content mt-4 leading-loose text-gray-800">
<span class="text-gray-600">
<svg class="w-6 h-6 -mt-1 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
Bank transfer
</span>
<p class="mt-2 text-lg">DE12 1234 5678 9012 3456 78</p>
</div>
</div>
<div class="w-96 relative p-8 shadow-md rounded-md m-8 mt-11">
<div class="header flex flex-row items-center">
<span class="uppercase tracking-wider text-gray-600">payment information</span>
<span class="flex-grow"></span>
<button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div class="content mt-4 leading-relaxed flex flex-col space-y-4">
<select class="px-4 py-2 border border-gray-300 rounded-md text-gray-600" type="text">
<option value>Bank transfer</option>
</select>
<input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Card information" />
<div class="flex flex-row">
<button class="px-4 py-2 bg-gradient-to-r from-sky-500 to-teal-500 text-white rounded-md">Save</button>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment