Recherche de tag

3079 ttmasteryi

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 September 2024

Curseur de déplacement rotatif

16 September 2025

Modèle HTML de formulaire d'envoi de pièces TikTok

20 September 2025

Démo de feux d'artifice animés CSS Lucioles Tournesol

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é

Curseur de déplacement rotatif

Modèle HTML de formulaire d'envoi de pièces TikTok

Démo de feux d'artifice animés CSS Lucioles Tournesol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS