Tailwind CSS Floating Footer Menu

Floating footers using Tailwind CSS

/r/n <svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"\/><\/svg>\r\n <\/a>\r\n\r\n <a class=\"px-3.5\" target=\"_blank\" href=https://www.creative-tim.com/"https:////www.producthunt.com//@salnetx/">/r/n <svg fill=\"currentColor\" width=\"28\" height=\"28\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22ZM13.3345 12H10.501V9H13.3345C14.1629 9 14.8345 9.67157 14.8345 10.5C14.8345 11.3284 14.1629 12 13.3345 12ZM13.3345 7H8.50098V17H10.501V14H13.3345C15.2675 14 16.8345 12.433 16.8345 10.5C16.8345 8.567 15.2675 7 13.3345 7Z\"><\/path><\/svg>\r\n <\/a>\r\n\r\n <a class=\"px-3.5 pt-0.5\" target=\"_blank\" href=https://www.creative-tim.com/"https:////twitter.com//salnetx/">/r/n <svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z\"\/><\/svg> \r\n <\/a>\r\n\r\n <a class=\"px-3.5 pt-0.5\" target=\"_blank\" href=https://www.creative-tim.com/"https:////x.com//salnetx/">/r/n <svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z\"\/><\/svg> \r\n <\/a>\r\n \r\n\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n\r\n <\/>","author_type":"App\\User","author_id":11726,"collection_id":null,"fork_id":null,"votes":0,"score":"0.0","visits":2406,"popularity":48,"slug":"floating-footer","approved":1,"created_at":"2024-01-12T00:00:00.000000Z","updated_at":"2024-09-19T02:58:08.000000Z","downloads":16,"code_views":146,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[],"author":{"id":11726,"name":"salnetx","slug":"salnetx","bio":"web developer & designer. https:\/\/salnet.xyz","avatar":"\/storage\/avatars\/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png","header":null,"created_at":"2023-04-01T17:17:02.000000Z","updated_at":"2024-03-23T10:28:00.000000Z"},"tags":[{"id":27,"name":{"en":"Menu"},"description":"A menu is a UI component which displays a list of choices on temporary surfaces. See below our collection of Menu examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Menu examples that you can add directly to your Tailwind UI project for displaying a list of choices on temporary surfaces.","slug":{"en":"menu"},"type":null,"order_column":26,"created_at":"2022-08-31T14:19:53.000000Z","updated_at":"2022-12-21T11:02:45.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6009,"tag_id":27}},{"id":95,"name":{"en":"Floating Label"},"description":"Implement the floating label style on input field elements to emulate the Material UI design system by Google. Select from a variety of styles and sizes to suit your preferences.","meta_description":"Implement the floating label style on input field elements to emulate the Material UI design system by Google. Select from a variety of styles and sizes to suit your preferences.","slug":{"en":"floating-label"},"type":null,"order_column":84,"created_at":"2023-11-15T16:11:35.000000Z","updated_at":"2023-11-15T16:11:35.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6009,"tag_id":95}}],"fork":null,"favorites":[{"id":16134,"name":"ctrljames","slug":"ctrljames","bio":null,"avatar":"\/storage\/avatars\/lMpJLAqN28ZJJGQCY5AQ3u26YWS9brlZi2jRTXAV.jpg","header":"\/storage\/headers\/M9haOK3UGgaF25rhrulcTn76y9C6sOJuYQKq0MH6.jpg","created_at":"2024-01-01T06:41:07.000000Z","updated_at":"2024-01-22T15:16:15.000000Z","pivot":{"component_id":6009,"user_id":16134}}]}" :edit="false"> Full screen Preview

salnetx

17 components Profile On

Community Rate

Related components

See more components