Alert
A flexible and responsive sidebar component with animations, collapsible behavior, and comprehensive customization options.
An example of an informational alert
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import React from "react";
function Alert
() {
return (
<div>
<section className="bg-coolGray-50 py-4">
<div className="container px-4 mx-auto">
<div className="p-6 bg-green-100 border border-green-200 rounded-md">
<div className="flex flex-wrap justify-between -m-2">
<div className="flex-1 p-2">
<div className="flex flex-wrap -m-1">
<div className="w-auto p-1">
<svg
className="text-green-500 relative top-0.5"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.99992 6.66666C7.82311 6.66666 7.65354 6.7369 7.52852 6.86192C7.40349 6.98695 7.33325 7.15652 7.33325 7.33333V8.66666C7.33325 8.84347 7.40349 9.01304 7.52852 9.13806C7.65354 9.26309 7.82311 9.33333 7.99992 9.33333C8.17673 9.33333 8.3463 9.26309 8.47132 9.13806C8.59635 9.01304 8.66659 8.84347 8.66659 8.66666V7.33333C8.66659 7.15652 8.59635 6.98695 8.47132 6.86192C8.3463 6.7369 8.17673 6.66666 7.99992 6.66666ZM13.6399 6.45333C13.5515 5.4764 13.2111 4.53915 12.6518 3.73327C12.0926 2.92738 11.3337 2.28047 10.4495 1.85582C9.56522 1.43118 8.5859 1.24333 7.60729 1.31067C6.62869 1.37801 5.68432 1.69823 4.86659 2.23999C4.16605 2.70842 3.57796 3.32619 3.14455 4.04892C2.71114 4.77165 2.44318 5.5814 2.35992 6.41999C2.27824 7.2531 2.38304 8.09394 2.6667 8.88151C2.95037 9.66908 3.40579 10.3836 3.99992 10.9733L7.53325 14.5133C7.59523 14.5758 7.66896 14.6254 7.7502 14.6593C7.83144 14.6931 7.91858 14.7105 8.00659 14.7105C8.09459 14.7105 8.18173 14.6931 8.26297 14.6593C8.34421 14.6254 8.41794 14.5758 8.47992 14.5133L11.9999 10.9733C12.5941 10.3836 13.0495 9.66908 13.3331 8.88151C13.6168 8.09394 13.7216 7.2531 13.6399 6.41999V6.45333ZM11.0666 10.0333L7.99992 13.1L4.93325 10.0333C4.48131 9.58136 4.13512 9.03488 3.91957 8.43317C3.70401 7.83145 3.62444 7.18946 3.68659 6.55333C3.74913 5.9074 3.95443 5.28343 4.28763 4.72656C4.62084 4.16968 5.07362 3.6938 5.61325 3.33333C6.32055 2.86348 7.15079 2.61286 7.99992 2.61286C8.84905 2.61286 9.67929 2.86348 10.3866 3.33333C10.9246 3.69241 11.3764 4.16618 11.7095 4.72062C12.0426 5.27506 12.2488 5.8964 12.3133 6.53999C12.3774 7.17828 12.2989 7.82284 12.0832 8.42703C11.8676 9.03121 11.5204 9.57988 11.0666 10.0333ZM8.61325 5.04666C8.59994 5.00571 8.57964 4.96736 8.55325 4.93333L8.47325 4.83333C8.39366 4.75776 8.29665 4.703 8.19082 4.67393C8.08499 4.64485 7.97361 4.64236 7.86659 4.66666H7.74659L7.62659 4.72666L7.52659 4.81333L7.44659 4.91333C7.4202 4.94736 7.3999 4.98571 7.38659 5.02666C7.36629 5.06636 7.35277 5.10917 7.34659 5.15333C7.33553 5.21265 7.33106 5.27302 7.33325 5.33333C7.33094 5.42293 7.34918 5.51187 7.38659 5.59333C7.42055 5.67201 7.46792 5.74419 7.52659 5.80666C7.59004 5.86896 7.66468 5.91872 7.74659 5.95333C7.90979 6.01533 8.09005 6.01533 8.25325 5.95333C8.33427 5.91709 8.40864 5.86751 8.47325 5.80666C8.53192 5.74419 8.57929 5.67201 8.61325 5.59333C8.64828 5.51111 8.66642 5.42269 8.66659 5.33333C8.66985 5.29117 8.66985 5.24882 8.66659 5.20666C8.66038 5.15014 8.6422 5.0956 8.61325 5.04666Z"
fill="currentColor"
></path>
</svg>
</div>
<div className="flex-1 p-1">
<h3 className="mb-2 font-medium text-sm text-green-900">
An example of an informational alert
</h3>
<p className="mb-4 font-medium text-sm text-green-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div className="flex flex-wrap -m-3">
<div className="w-auto p-3">
<a
className="flex items-center font-medium text-sm text-green-900 hover:text-green-800"
href="#"
>
<p className="mr-2">Learn More</p>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.9467 7.74666C11.9149 7.66483 11.8674 7.59007 11.8067 7.52666L8.47333 4.19333C8.41117 4.13117 8.33738 4.08186 8.25617 4.04822C8.17495 4.01458 8.08791 3.99727 8 3.99727C7.82247 3.99727 7.6522 4.06779 7.52667 4.19333C7.46451 4.25549 7.4152 4.32928 7.38156 4.4105C7.34792 4.49171 7.33061 4.57876 7.33061 4.66666C7.33061 4.8442 7.40113 5.01446 7.52667 5.14L9.72667 7.33333H4.66667C4.48986 7.33333 4.32029 7.40357 4.19526 7.52859C4.07024 7.65362 4 7.82319 4 8C4 8.17681 4.07024 8.34638 4.19526 8.4714C4.32029 8.59643 4.48986 8.66666 4.66667 8.66666H9.72667L7.52667 10.86C7.46418 10.922 7.41459 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41459 11.671 7.46418 11.7447 7.52667 11.8067C7.58864 11.8691 7.66238 11.9187 7.74362 11.9526C7.82486 11.9864 7.91199 12.0039 8 12.0039C8.08801 12.0039 8.17515 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8067L11.8067 8.47333C11.8674 8.40993 11.9149 8.33516 11.9467 8.25333C12.0133 8.09102 12.0133 7.90897 11.9467 7.74666Z"
fill="currentColor"
></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div className="w-auto p-2">
<a href="#">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.9398 8L13.1398 3.80667C13.2653 3.68113 13.3359 3.51087 13.3359 3.33333C13.3359 3.1558 13.2653 2.98554 13.1398 2.86C13.0143 2.73447 12.844 2.66394 12.6665 2.66394C12.4889 2.66394 12.3187 2.73447 12.1931 2.86L7.9998 7.06L3.80646 2.86C3.68093 2.73447 3.51066 2.66394 3.33313 2.66394C3.1556 2.66394 2.98533 2.73447 2.8598 2.86C2.73426 2.98554 2.66374 3.1558 2.66374 3.33333C2.66374 3.51087 2.73426 3.68113 2.8598 3.80667L7.0598 8L2.8598 12.1933C2.79731 12.2553 2.74771 12.329 2.71387 12.4103C2.68002 12.4915 2.6626 12.5787 2.6626 12.6667C2.6626 12.7547 2.68002 12.8418 2.71387 12.9231C2.74771 13.0043 2.79731 13.078 2.8598 13.14C2.92177 13.2025 2.99551 13.2521 3.07675 13.2859C3.15798 13.3198 3.24512 13.3372 3.33313 13.3372C3.42114 13.3372 3.50827 13.3198 3.58951 13.2859C3.67075 13.2521 3.74449 13.2025 3.80646 13.14L7.9998 8.94L12.1931 13.14C12.2551 13.2025 12.3288 13.2521 12.4101 13.2859C12.4913 13.3198 12.5785 13.3372 12.6665 13.3372C12.7545 13.3372 12.8416 13.3198 12.9228 13.2859C13.0041 13.2521 13.0778 13.2025 13.1398 13.14C13.2023 13.078 13.2519 13.0043 13.2857 12.9231C13.3196 12.8418 13.337 12.7547 13.337 12.6667C13.337 12.5787 13.3196 12.4915 13.2857 12.4103C13.2519 12.329 13.2023 12.2553 13.1398 12.1933L8.9398 8Z"
fill="#1D4079"
></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
); }
export default Test;