tailwindcss@3.3.3

Shadcn UI Message Box Component - Horizon AI Boilerplate

Free Shadcn UI message box 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="" mt-20="" px-5="" pt-0="" md:h-[unset]="" md:max-w-[80%]="" lg:h-[60vh]="" lg:max-w-[80%]="" lg:px-6="" xl:pl-0="" \">\r\n="" pt-[20px]="" md:pt-0\">="" \r\n="" min-h-[25vh]="" max-w-[1000px]="" xl:min-h-[35vh]\">="" mb-auto\">\r\n="" text-center\">\r\n="" h-[40px]="" min-h-[40px]="" min-w-[40px]="" rounded-full="" border="" border-zinc-200="" bg-transparent="" dark:border-transparent="" dark:bg-white\">\r\n="" <svg="" stroke="\"currentColor\"" fill="\"currentColor\"" stroke-width="\"0\"" viewbox="\"0" 0="" 24="" 24\"\r\n="" aria-hidden="\"true\"" w-4\"="" height="\"1em\"" width="\"1em\"\r\n" xmlns="\"http:\/\/www.w3.org\/2000\/svg\">\r\n" <path="" fill-rule="\"evenodd\"\r\n" d="\"M7.5" 6a4.5="" 4.5="" 1="" 9="" 1-9="" 0zm3.751="" 20.105a8.25="" 8.25="" 16.498="" .75.75="" 1-.437.695a18.683="" 18.683="" 12="" 22.5c-2.786="" 0-5.433-.608-7.812-1.7a.75.75="" 1-.437-.695z\"\r\n="" clip-rule="\"evenodd\"><\/path>\r\n" <\="" svg><\="" div>\r\n="" w-full\">\r\n="" rounded-lg="" bg-white\="" 10="" p-5="" backdrop-blur-xl="" dark:border-white\="" dark:bg-zinc-950\">\r\n="" <p\r\n="" font-medium="" leading-6="" text-zinc-950="" dark:text-white="" md:text-base="" md:leading-[26px]\">\r\n="" write="" me="" a="" paragraph="" about="" mihai="" viteazul<\="" p>\r\n="" w-[70px]="" cursor-pointer="" 20="" 20\"\r\n="" w-[20px]="" dark:text-white\"\r\n="" <path\r\n="" 13.917="" 1.262-3.155a4="" 4="" 7.58="" 9.42l6.92-6.918a2.121="" 2.121="" 3="" 3l-6.92="" 6.918c-.383.383-.84.685-1.343.886l-3.154="" 1.262a.5.5="" 1-.65-.65z\">\r\n="" path>\r\n="" 5.75c0-.69.56-1.25="" 1.25-1.25h10a.75.75="" 3h4.75a2.75="" 2.75="" 2="" 5.75v9.5a2.75="" 4.75="" 18h9.5a2.75="" 17="" 15.25v10a.75.75="" 0-1.5="" 0v5.25c0="" .69-.56="" 1.25-1.25="" 1.25h-9.5c-.69="" 0-1.25-.56-1.25-1.25v-9.5z\">\r\n="" h-10="" bg-zinc-950="" dark:border="" dark:border-zinc-800\">\r\n="" w-4="" text-white\"="" 4.5a.75.75="" .721.544l.813="" 2.846a3.75="" 3.75="" 2.576="" 2.576l2.846.813a.75.75="" 1.442l-2.846.813a3.75="" 0-2.576="" 2.576l-.813="" 2.846a.75.75="" 1-1.442="" 0l-.813-2.846a3.75="" 0-2.576-2.576l-2.846-.813a.75.75="" 0-1.442l2.846-.813a3.75="" 7.466="" 7.89l.813-2.846a.75.75="" 4.5zm18="" 1.5a.75.75="" .728.568l.258="" 1.036c.236.94.97="" 1.674="" 1.91="" 1.91l1.036.258a.75.75="" 1.456l-1.036.258c-.94.236-1.674.97-1.91="" 1.91l-.258="" 1.036a.75.75="" 1-1.456="" 0l-.258-1.036a2.625="" 2.625="" 0-1.91-1.91l-1.036-.258a.75.75="" 0-1.456l1.036-.258a2.625="" 1.91-1.91l.258-1.036a.75.75="" 18="" 1.5zm16.5="" 15a.75.75="" .712.513l.394="" 1.183c.15.447.5.799.948.948l1.183.395a.75.75="" 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395="" 1.183a.75.75="" 1-1.422="" 0l-.395-1.183a1.5="" 1.5="" 0-.948-.948l-1.183-.395a.75.75="" 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183a.75.75="" 16.5="" 15z\"\r\n="" shadow-sm="" !max-h-max="" !px-[22px]="" !py-[22px]="" text-base="" font-normal="" text-white="" dark:border-zinc-800="" dark:!bg-white\="" 5="" font-normal\">\r\n="" <p><strong>mihai="" strong><\="" <p> <\="" <p>mihai="" viteazul,="" also="" known="" as="" michael="" the="" brave,="" was="" romanian="" prince="" who="" ruled\r\n="" in="" late="" 16th="" century.="" he="" is="" celebrated="" for="" his="" efforts="" to="" unite="" three\r\n="" historical="" provinces="" of="" wallachia,="" transylvania,="" and="" moldavia="" into="" single\r\n="" country.="" viteazul's="" reign="" marked="" by="" determination="" resist\r\n="" foreign="" powers="" assert="" independence.="" legacy="" national="" hero\r\n="" romania="" endures="" this="" day,="" symbolizing="" unity,="" courage,="" fight="" for\r\n="" freedom.<\="" div>="" div>\r\n\r\n="" <p="" mx-auto="" w-max\">message="" box="" 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":110,"popularity":300,"slug":"shadcn-ui-message-box-component-horizon-ai-boilerplate","approved":1,"created_at":"2024-09-02t00:00:00.000000z","updated_at":"2024-09-18t18:40:50.000000z","downloads":0,"code_views":11,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12614,"model_type":"app\\component","model_id":7128,"collection_name":"preview","name":"temp51184","file_name":"temp51184.png","mime_type":"image\="" png","disk":"public","size":49959,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp51184___media_library_original_1280_957.png","temp51184___media_library_original_1070_800.png","temp51184___media_library_original_895_669.png","temp51184___media_library_original_749_560.png","temp51184___media_library_original_627_469.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fhqufnqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeevvwk0mutdmc93qmjlc2yrognvqvyxofeyrehbdw92kytouuevd0r0exkvnstvdisraffctejxtuywzjnvcvnmn3b6uui4dy90a0o0mggwzu9ud241eg1qvvjab0erswz0bngrvmlrtdm5yvledjdtk1a4qtzydjywyufmv2y3rk56ofjacnk1l3ddrxdfk3orshpjmgdqc202c0lmcgnuukxjufjobwdeugz3mvlny2kwaugvqvjrqtfqreznclpockvmk0fpz0rrdgrndhjul1v3ceyvdwpgqugvmle9psi+cgk8l2ltywdlpgo8l3n2zz4=""}},"order_column":5,"created_at":"2024-09-09T10:44:22.000000Z","updated_at":"2024-09-09T10:44:24.000000Z","conversions_disk":"public","uuid":"231ec123-a014-4ccf-a7ea-8b31b1a2de79","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/12614\/temp51184.png","preview_url":""}],"author":{"id":11240,"name":"vldmihalache","slug":"vldmihalache","bio":"Co-founder" cto="" horizon="" ui.\r\nhttps:\="" horizon-ui.com","avatar":"\="" storage\="" avatars\="" 6gqyxte71l3147pgi8zcicj48igisrjaowkpjkwq.jpg","header":null,"created_at":"2023-03-01t10:21:52.000000z","updated_at":"2023-03-01t12:58:58.000000z"},"tags":[{"id":12,"name":{"en":"inputs"},"description":"find="" your="" inspiration="" with="" our="" collection="" free="" input="" examples.="" copy="" paste="" them="" app="" spend="" less="" time="" on="" coding.","meta_description":"find="" coding.","slug":{"en":"inputs"},"type":null,"order_column":6,"created_at":"2020-09-29t11:58:52.000000z","updated_at":"2022-08-01t16:21:48.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7128,"tag_id":12}}],"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":7128,"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":7128,"user_id":11242}}]}"="" :edit="false"> Full screen Preview

Related components

See more components

Shadcn UI Message Box Component - Horizon AI Boilerplate

Community Rate

Related components