tailwindcss@3.3.3

Shadcn UI Table Card Component - Horizon AI Boilerplate

Free Shadcn UI table card component from Horizon AI Boilerplate

"="" \="" >\r\n<\="" head>\r\n\r\n<body>\r\n="" <div="" flex-col="" justify-center="" items-center="" bg-white="" h-[100vh]\">\r\n="" <div\r\n="" flex="" w-full="" px-5="" pt-0="" md:h-[unset]="" md:max-w-[95%]="" lg:h-[100vh]="" lg:max-w-[70%]="" lg:px-6="" xl:pl-0="" mt-10\">\r\n="" rounded-lg="" \">\r\n="" border="" bg-card="" text-card-foreground="" shadow-sm="" h-full="" border-zinc-200="" p-0="" dark:border-zinc-800="" sm:overflow-auto\">\r\n="" xl:overflow-x-hidden\">\r\n="" overflow-auto\">\r\n="" <table="" text-sm="" w-full\">\r\n="" <thead\r\n="" border-b-[1px]="" p-6="" dark:border-zinc-800\">\r\n="" <tr="" <th="" px-4="" align-middle="" font-medium="" text-muted-foreground="" [&:has([role="checkbox])]:pr-0" cursor-pointer="" pl-5="" pr-4="" pt-2="" text-start="" dark:border-zinc-800\"\r\n="" colspan="\"1\">\r\n" max-w-max="" items-center\"><button="" type="\"button\"\r\n" role="\"checkbox\"" aria-checked="\"false\"" data-state="\"unchecked\"\r\n" value="\"on\"\r\n" h-4="" w-4="" shrink-0="" rounded-sm="" border-primary="" ring-offset-background="" focus-visible:outline-none="" focus-visible:ring-2="" focus-visible:ring-ring="" focus-visible:ring-offset-2="" disabled:cursor-not-allowed="" disabled:opacity-50="" data-[state="checked]:bg-primary" <\="" div>\r\n="" th>\r\n="" <p="" font-semibold="" text-zinc-500="" dark:text-zinc-400\">email\r\n="" address<\="" p>\r\n="" dark:text-zinc-400\">provider\r\n="" dark:text-zinc-400\">created\r\n="" dark:text-zinc-400\">last="" sign\r\n="" in<\="" dark:text-zinc-400\">user="" uid\r\n="" dark:text-zinc-400\"><\="" tr>\r\n="" thead>\r\n="" <tbody="" <tr\r\n="" transition-colors="" hover:bg-muted\="" 50="" px-6="" dark:hover:bg-gray-900\">\r\n="" <td\r\n="" w-max="" py-5="" dark:border-white\="" 10\">\r\n="" td>\r\n="" text-zinc-950="" dark:text-white\">\r\n="" vlad@simmmple.com<\="" gap-[14px]\">\r\n="" dark:text-white\">google<\="" dark:text-white\">06="" nov,\r\n="" 2023="" 11:33<\="" nov,="" 2023\r\n="" f3f42fc419-ce32-49fc-92df...<\="" <div><button\r\n="" disabled:pointer-events-none="" h-10="" py-2="" text-xl="" hover:cursor-pointer="" bg-transparent="" hover:bg-transparent="" active:bg-transparent="" dark:text-white="" dark:hover:bg-transparent="" dark:active:bg-transparent="" font-bold="" transition="" duration-200\"\r\n="" id="\"radix-:r0:\"" aria-haspopup="\"menu\"\r\n" aria-expanded="\"false\"" hover:cursor-pointer\"><svg="" stroke="\"currentColor\"\r\n" fill="\"currentColor\"" stroke-width="\"0\"" viewbox="\"0" 0="" 16="" 16\"\r\n="" height="\"1em\"" width="\"1em\"" xmlns="\"http:\/\/www.w3.org\/2000\/svg\">\r\n" <path\r\n="" d="\"M3" 9.5a1.5="" 1.5="" 1="" 0-3="" 3m5="" 0a1.5="" 3\">\r\n="" path>\r\n="" svg><\="" button><\="" thomas@gmail.com<\="" 11:29<\="" markwilliam@hotmail.com<\="" dark:text-white\">email<\="" 11:21<\="" tr>="" \r\n="" tbody>\r\n="" table>\r\n="" h-20="" justify-between="" px-6\">\r\n="" gap-3\">\r\n="" dark:text-zinc-400\">showing="" 6="" rows="" per="" page\r\n="" gap-2\"><button\r\n="" p-2="" text-lg="" duration-200="" dark:active:bg-transparent\"\r\n="" disabled="\"\">" 24="" 24\"="" <path="" 0h24v24h0z\"><\="" 7.41="" 14="" 6l-6="" 1.41-1.41l10.83="" 12z\"><\="" button><button\r\n="" min-w-[34px]="" dark:active:bg-transparent\"><svg\r\n="" 24\"\r\n="" 8.59="" 13.17="" 12l-4.58="" 4.59l10="" 18l6-6z\"><\="" mb-20="" mt-10="" mx-auto="" w-max\">table="" card="" component="" from="" <a\r\n="" href="https://www.creative-tim.com/"https:////horizon-ui.com//shadcn-ui?ref=twcomponents\%22" target="\"_blank\"\r\n" font-bold\">horizon="" ai="" boilerplate<\="" a>\r\n="" div>\r\n<\="" body>\r\n\r\n<\="" html>","author_type":"app\\user","author_id":11240,"collection_id":4,"fork_id":null,"votes":2,"score":"5.0","visits":398,"popularity":390,"slug":"table-card-done-with-at-shadcnui-horizon-ai-boilerplate","approved":1,"created_at":"2024-09-02t00:00:00.000000z","updated_at":"2024-09-19t01:53:30.000000z","downloads":3,"code_views":92,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12613,"model_type":"app\\component","model_id":7111,"collection_name":"preview","name":"temp46776","file_name":"temp46776.png","mime_type":"image\="" png","disk":"public","size":57072,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp46776___media_library_original_1280_957.png","temp46776___media_library_original_1070_800.png","temp46776___media_library_original_895_669.png","temp46776___media_library_original_749_560.png","temp46776___media_library_original_627_469.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fhqufnqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeevvwu3ymfosw9bchrnu21hqulsdvdfzzvvqtfzvgtbmefktkg1z3hrqkv0a3uzqm9bvct6murbk2xbrmlozhzgqur6mg9bagtswmvnb0fise83dgdqrkfgz2rlqvavl1oipgojpc9pbwfnzt4kpc9zdmc+"}},"order_column":7,"created_at":"2024-09-09t10:44:12.000000z","updated_at":"2024-09-09t10:44:14.000000z","conversions_disk":"public","uuid":"317e6183-f664-47dc-a6f0-db43c02e807c","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\="" tailwindcomponents.com\="" storage\="" 12613\="" temp46776.png","preview_url":""}],"author":{"id":11240,"name":"vldmihalache","slug":"vldmihalache","bio":"co-founder="" and="" cto="" of="" horizon="" ui.\r\nhttps:\="" horizon-ui.com","avatar":"\="" avatars\="" 6gqyxte71l3147pgi8zcicj48igisrjaowkpjkwq.jpg","header":null,"created_at":"2023-03-01t10:21:52.000000z","updated_at":"2023-03-01t12:58:58.000000z"},"tags":[{"id":4,"name":{"en":"cards"},"description":"check="" out="" our="" examples="" beautifully="" designed="" cards="" that="" will="" help="" you="" display="" your="" content="" easily.="" use="" snippets="" to="" preview="" the="" code="" spend="" less="" time="" re-inventing="" wheel.","meta_description":"check="" easily.","slug":{"en":"cards"},"type":null,"order_column":3,"created_at":"2019-07-04t08:20:17.000000z","updated_at":"2022-08-01t16:06:24.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7111,"tag_id":4}}],"fork":null,"favorites":[{"id":11240,"name":"vldmihalache","slug":"vldmihalache","bio":"co-founder="" 6gqyxte71l3147pgi8zcicj48igisrjaowkpjkwq.jpg","header":null,"created_at":"2023-03-01t10:21:52.000000z","updated_at":"2023-03-01t12:58:58.000000z","pivot":{"component_id":7111,"user_id":11240}},{"id":11242,"name":"fredycraciun","slug":"fredycraciun","bio":"co-founder="" creator="" ui.\r\nweb="" designer="" &="" developer.\r\nhttps:\="" horizon-ui.com","avatar":"https:\="" pbs.twimg.com\="" profile_images\="" 1611026227258691588\="" nvskzaf1_normal.jpg","header":null,"created_at":"2023-03-01t12:25:14.000000z","updated_at":"2023-03-01t12:55:22.000000z","pivot":{"component_id":7111,"user_id":11242}}]}"="" :edit="false"> Full screen Preview