JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Bootstrap1</title>
<link rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 1366px)" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<style>
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-calendar-fill" viewBox="0 0 16 16">
<path d="M10 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z"/>
</svg>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 100 100 L 300 100 L 200 300 z"
fill="green"width="3" />
</svg>
<svg
width="250"
viewBox="0 0 200 85"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<defs>
<!-- Filter declaration -->
<filter
id="MyFilter"
filterUnits="userSpaceOnUse"
x="0"
y="0"
width="200"
height="120">
<!-- offsetBlur -->
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<!-- litPaint -->
<feSpecularLighting
in="blur"
surfaceScale="5"
specularConstant=".75"
specularExponent="20"
lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite
in="specOut"
in2="SourceAlpha"
operator="in"
...