Gradient Border List

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Gradient Border List</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <style>
 body {
 font-family: 'Arial', sans-serif;
 background: linear-gradient(135deg, #e3ffe7, #d9e7ff);
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 }
 .gradient-border-list {
 width: 60%;
 max-width: 600px;
 background: #fff;
 border-radius: 15px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 overflow: hidden;
 }
 .gradient-border-list ul {
 list-style: none;
 padding: 0;
 margin: 0;
 }
 .gradient-border-list li {
 display: flex;
 align-items: center;
 padding: 15px;
 border-left: 5px solid transparent;
 position: relative;
 transition: border-left 0.3s, background 0.3s;
 }
 .gradient-border-list li:hover {
 background: #f0f8ff;
 border-left: 5px solid linear-gradient(90deg, #00c6ff, #0072ff);
 }
 .gradient-border-list li:last-child {
 border-bottom: none;
 }
 .gradient-border-list .icon {
 margin-right: 15px;
 font-size: 24px;
 color: #6c757d;
 }
 .gradient-border-list .text {
 flex: 1;
 font-size: 18px;
 color: #333;
 }
 .gradient-border-list .emoji {
 font-size: 24px;
 margin-left: 15px;
 }
 </style>
</head>
<body>
<div class="gradient-border-list">
 <ul>
 <li>
 
 Item 1
 🌈
 </li>
 <li>
 
 Item 2
 🌟
 </li>
 <li>
 
 Item 3
 💖
 </li>
 <li>
 
 Item 4
 😃
 </li>
 </ul>
</div>
</body>
</html>

Gradient Border List - MeggiTools