Tailwind CSS Text Background

Card with Text Background make in tailwind CSS

\r\n <\/div>\r\n <div class=\"capitalize text-4xl font-extrabold rounded-lb-3xl absolute inset-x-0 bottom-0 max-h-31\">\r\n <span class=\"box-decoration-clone bg-gray-100 rounded-r-3xl pr-5\">\r\n <span class=\"text-sm text-center inline-block align-middle pr-5\">\r\n category . Gym | 22 Feb\r\n <\/span>\r\n <\/br>\r\n <span class=\"\">\r\n best full-body home gym machines!\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative w-1\/3 bg-slate-500 rounded-2xl\">\r\n <div class=\"max-h-72\">\r\n <img class=\"object-cover w-max max-h-72 rounded-xl\" \r\n src=https://www.creative-tim.com/"https:////images.unsplash.com//photo-1448387473223-5c37445527e7?q=80&w=1800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\%22>\r\n <\/div>\r\n <div class=\"capitalize text-4xl font-extrabold rounded-lb-3xl absolute inset-x-0 bottom-0 max-h-31\">\r\n <span class=\"box-decoration-clone bg-gray-100 rounded-r-3xl pr-5\">\r\n <span class=\"text-sm text-center inline-block align-middle pr-5\">\r\n category . Gym | 22 Feb\r\n <\/span>\r\n <\/br>\r\n <span class=\"\">\r\n rdy,go! how to start running to stay fit\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative w-1\/3 bg-slate-500 rounded-2xl\">\r\n <div class=\"max-h-72\">\r\n <img class=\"object-cover w-max max-h-72 rounded-xl\" \r\n src=https://www.creative-tim.com/"https:////images.unsplash.com//photo-1537289150563-b7f10eee353b?q=80&w=6016&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\%22>\r\n <\/div>\r\n <div class=\"capitalize text-4xl font-extrabold rounded-lb-3xl absolute inset-x-0 bottom-0 max-h-31\">\r\n <span class=\"box-decoration-clone bg-gray-100 rounded-r-3xl pr-5\">\r\n <span class=\"text-sm text-center inline-block align-middle pr-5\">\r\n category . Gym | 22 Feb\r\n <\/span>\r\n <\/br>\r\n <span class=\"\">\r\n overcoming laziness in sports\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div> \r\n<\/div>\r\n<\/div>","author_type":"App\\User","author_id":16134,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":895,"popularity":45,"slug":"text-background","approved":1,"created_at":"2024-01-28T00:00:00.000000Z","updated_at":"2024-09-18T18:47:02.000000Z","downloads":10,"code_views":66,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11229,"model_type":"App\\Component","model_id":6080,"collection_name":"preview","name":"temp89101","file_name":"temp89101.png","mime_type":"image\/png","disk":"public","size":516096,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp89101___media_library_original_1280_957.png","temp89101___media_library_original_1070_800.png","temp89101___media_library_original_895_669.png","temp89101___media_library_original_749_560.png","temp89101___media_library_original_627_469.png","temp89101___media_library_original_524_392.png","temp89101___media_library_original_439_328.png","temp89101___media_library_original_367_274.png","temp89101___media_library_original_307_230.png","temp89101___media_library_original_257_192.png","temp89101___media_library_original_215_161.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEFmZmZzYTYxWTNNVjdBV2FWR0I2VWV5WmhleXNqM2p3aDhQZFVUdzR0dmRSdjVrYTQ2VjdXRHhNcVB1cEhqWXJDUnJlODJYOUQrSEY5Wk5JNGpZczNmRmVoanF2dHFWaml3RkgyTmE2TDhQdzQxWjd3U0RjcWZTdmlKNFNVcFhQMENsakl4alpuMFFiT0poZ29wSDByM3o1MjQxYkNGUmdScUI5S2V3dHhSWXdyMGpYOHFiYllra3RoNHRrSDhJcVNya3RNUVVBRkFCUUIvOWs9Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":10,"created_at":"2024-01-29T05:22:46.000000Z","updated_at":"2024-01-29T05:22:49.000000Z","conversions_disk":"public","uuid":"47c0449e-bc1d-402b-ba90-d0adc2dbcd41","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11229\/temp89101.png","preview_url":""}],"author":{"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"},"tags":[{"id":4,"name":{"en":"Cards"},"description":"Check out our examples of beautifully designed cards that will help you display your content easily. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our examples of beautifully designed cards that will help you display your content 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":6080,"tag_id":4}},{"id":100,"name":{"en":"Text"},"description":"Discover Tailwind CSS classes to personalize text-related styles and attributes, including font size, font style, text decoration, font weight, and more. Elevate your design with versatile text customization options.","meta_description":"Discover Tailwind CSS classes to personalize text-related styles and attributes, including font size, font style, text decoration, font weight, and more. Elevate your design with versatile text customization options.","slug":{"en":"text"},"type":null,"order_column":89,"created_at":"2023-11-15T16:32:45.000000Z","updated_at":"2023-11-15T16:32:45.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6080,"tag_id":100}}],"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":6080,"user_id":16134}}]}" :edit="false"> Full screen Preview

ctrljames

5 components

Community Rate

Related components

See more components