<html>
<head>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
</head>
<body>
<div class="tw-flex tw-bg-primary-200 tw-w-full ">
<!-- Sidebar with a fixed width -->
<div class="tw-w-[256px] tw-shrink-0 tw-bg-gray-500">sidebar</div>
<!-- Main content container that takes up the remaining space -->
<div class="tw-w-full tw-bg-amber-50 tw-overflow-hidden">
<!-- Non-scrolling header content -->
<div id="headd" class="tw-bg-primary-500 tw-p-4">
<% 1.upto(999) do %>
<%= _1 %>
<% end %>
</div>
<!-- Scrollable content area -->
<h1 class="tw-mt-10 tw-font-semibold tw-text-2xl">table</h1>
<div class="tw-overflow-x-auto tw-bg-amber-50">
<table class="">
<% 10.times do %>
<%= turbo_frame_tag "bbb" do %>
<tr>
<td class="tw-min-w-96 tw-w-96 tw-sticky tw-left-0 tw-bg-amber-50"><%= Forgery::Name.company_name %></td>
<td class="tw-min-w-24 tw-w-24 tw-bg-blue-100">4x6</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100"><%= Forgery('basic').number %></td>
<td class="tw-min-w-48 tw-w-48 tw-bg-blue-100"><%= Forgery('monetary').formatted_money %></td>
<!-- <turbo-frame id="aaa" src="bbb"> -->
<%= turbo_frame_tag "aaa" do %>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">
<%= turbo_frame_tag "ccc" do %>
Farmed
<% end %>
</td>
<% end %>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">Dummy</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">Dummy</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">Dummy</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">Dummy</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">Dummy</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">Dummy</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100">Dummy</td>
<td class="tw-min-w-48 tw-w-48 tw-bg-blue-100"><%= Forgery('basic').number %>.<%= Forgery('basic').number %></td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100"><%= Forgery('monetary').formatted_money %></td>
<td class="tw-min-w-48 tw-w-48 tw-bg-blue-100"><%= Forgery('date').date %></td>
<td class="tw-min-w-48 tw-w-48 tw-bg-red-100"><%= render Gen::Badge::SentComponent.new %></td>
</tr>
<% end %>
<% end %>
</table>
</div>
<h1 class="tw-mt-10 tw-font-semibold tw-text-2xl">Flex</h1>
<div id="tabl" class="tw-overflow-x-auto tw-overscroll-contain tw-bg-white">
<% 10.times do %>
<%= turbo_frame_tag "bbb" do %>
<div class="tw-flex tw-w-max">
<div class="tw-flex-shrink-0 tw-bg-amber-50 tw-p-4 tw-w-96 tw-sticky tw-left-0">long name dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-24">4x6</div>
<%= turbo_frame_tag "aaa" do %>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Farmed</div>
<% end %>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
<div class="tw-flex-shrink-0 tw-p-2 tw-w-48">Dummy</div>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
</body>
</html>