Kinetic Component Library

Tabs 

<div class="max-w-7xl sm:mx-auto -mx-4">
    <div class="border-b border-t">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="flex sm:inline-flex border-l border-r divide-x text-dark text-sm sm:text-lg relative">
                <a href="#" class="w-1/2 sm:w-auto px-4 sm:px-10 py-6 text-center underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-dark focus:z-10 font-bold bg-gradient-to-b from-gray-200">Company Dashboard</a>
                <a href="#" class="w-1/2 sm:w-auto px-4 sm:px-10 py-6 text-center underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-dark focus:z-10 ">My Dashboard</a>
            </div>
        </div>
    </div>
</div>
 
<div class="max-w-7xl sm:mx-auto -mx-4">
	<div class="border-b border-t">
		<div class="max-w-7xl mx-auto px-4 sm:px-6">
			<div class="flex sm:inline-flex border-l border-r divide-x text-dark text-sm sm:text-lg relative">
				<a href="#" class="w-1/2 sm:w-auto px-4 sm:px-10 py-6 text-center underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-dark focus:z-10 {{#if company }}font-bold bg-gradient-to-b from-gray-200{{/if}}">Company Dashboard</a>
				<a href="#" class="w-1/2 sm:w-auto px-4 sm:px-10 py-6 text-center underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-dark focus:z-10 {{#if personal }}font-bold bg-gradient-to-b from-gray-200{{/if}}">My Dashboard</a>
			</div>
		</div>
	</div>
</div>
 
{
  "company": true,
  "personal": false
}

No notes defined.