Recherche de tag

2539 ttmasteryi

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 June 2025

Animation de basculement de triangle CSS

16 September 2025

Exemple d'animation de formes CSS

11 March 2024

Générateur de QRCode

HTML

<!DOCTYPE html>




<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Search Tag</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        
            <div class="wrapper">
                <h2 class="title">Search Tag</h2>
                <div class="content">
                   
                    <input type="text" placeholder="Type and Enter"> 
                </div>
                <button class="remove-all">Remove All</button>
                
            </div>  
    </body>
    <script src="app.js" ></script>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap');
:root{
    --primary-color:#8cc84c;
}
*{
    margin: 0;
    padding:0;
    box-sizing:border-box;

}
body{
    font-family: 'Poppins';
    background: #8cc84c;
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
.wrapper{
    background: white;
    border-radius: 10px;
    width: 400px;
    padding:20px;
}
.title{
    font-size: 22px;
}
.content{
    border: 1px solid #888;
    padding: 10px;
    display:flex;
    flex-wrap: wrap;
    margin-top: 20px;
    border-radius: 5px;

}
.content li{
    background: #8cc84c;
    color:white;
    border-radius: 3px;   
    list-style: none;
    margin:4px 3px;
    padding:10px;
}
.content li i{
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
}
.content input{
    border:none;
    outline: none;
    font-size: 20px;
    margin:10px;
    flex:1;
}
.remove-all{
    background: var(--primary-color);
    border:none;
    outline: none;
    border-radius: 5px;
    color:white;
    padding: 10px 20px;
    font-size: 16px;
    margin-top:20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.remove-all:hover{
    background: #7cac49;
}

Recommandé

Animation de basculement de triangle CSS

Exemple d'animation de formes CSS

Générateur de QRCode

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS