Tab Lift

                    <div role="tablist" class="flex border-b border-gray-200">
  <button class="px-4 py-2 -mb-px text-sm font-medium text-gray-500 rounded-t-lg hover:bg-gray-50 hover:text-gray-700">Tab 1</button>
  <button class="px-4 py-2 -mb-px text-sm font-medium text-blue-600 bg-white border-l border-t border-r border-gray-200 rounded-t-lg">Tab 2</button>
  <button class="px-4 py-2 -mb-px text-sm font-medium text-gray-500 rounded-t-lg hover:bg-gray-50 hover:text-gray-700">Tab 3</button>
</div>

<div class="p-4 bg-white border-l border-r border-b border-gray-200 rounded-b-lg">
  <div class="hidden">Tab 1 content goes here</div>
  <div>
    <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 2 Content</h3>
    <p class="text-gray-600">This is the content for Tab 2. The active tab appears to be "lifted" above the content area.</p>
  </div>
  <div class="hidden">Tab 3 content goes here</div>
</div>