EN TR
<div class="component--cdn-list">
	<ul>
		<li>
			<a href="#">
				<span class="title-wrapper">
					<span class="title">
						vue <span>@ 3.0.2</span>
					</span>
					<span class="star">
						<svg width="24px" height="23px" viewBox="0 0 24 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g id="Day-1215-UI-Components-Design" transform="translate(-628.000000, -138.000000)" class="icon-star">
									<g id="Group-6" transform="translate(90.000000, 96.000000)">
										<g id="Group-5">
											<g id="Group-2" transform="translate(536.000000, 40.000000)">
												<g id="Group">
													<polygon id="Path" points="14 20.7083333 6.79933333 24.4941667 8.17483333 16.4756667 2.3415 10.7975 10.3915 9.63083333 13.9918333 2.33566667 17.5921667 9.63083333 25.6421667 10.7975 19.8088333 16.4756667 21.1843333 24.4941667"></polygon>
												</g>
											</g>
										</g>
									</g>
								</g>
							</g>
						</svg>
						174K
					</span>
				</span>
				<span class="description">
					Simple, Fast & Composable MVVM for building interactive interfaces
				</span>
				<span class="tags">
					<span>mvvm</span>
					<span>browser</span>
					<span>framework</span>
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="title-wrapper">
					<span class="title">
						react <span>@ 17.0.1</span>
					</span>
					<span class="star">
						<svg width="24px" height="23px" viewBox="0 0 24 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g id="Day-1215-UI-Components-Design" transform="translate(-628.000000, -138.000000)" class="icon-star">
									<g id="Group-6" transform="translate(90.000000, 96.000000)">
										<g id="Group-5">
											<g id="Group-2" transform="translate(536.000000, 40.000000)">
												<g id="Group">
													<polygon id="Path" points="14 20.7083333 6.79933333 24.4941667 8.17483333 16.4756667 2.3415 10.7975 10.3915 9.63083333 13.9918333 2.33566667 17.5921667 9.63083333 25.6421667 10.7975 19.8088333 16.4756667 21.1843333 24.4941667"></polygon>
												</g>
											</g>
										</g>
									</g>
								</g>
							</g>
						</svg>
						158K
					</span>
				</span>
				<span class="description">
					React is a JavaScript library for building user interfaces.
				</span>
				<span class="tags">
					<span>mvvm</span>
					<span>browser</span>
					<span>framework</span>
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="title-wrapper">
					<span class="title">
						angular <span>@ 10.2.1</span>
					</span>
					<span class="star">
						<svg width="24px" height="23px" viewBox="0 0 24 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g id="Day-1215-UI-Components-Design" transform="translate(-628.000000, -138.000000)" class="icon-star">
									<g id="Group-6" transform="translate(90.000000, 96.000000)">
										<g id="Group-5">
											<g id="Group-2" transform="translate(536.000000, 40.000000)">
												<g id="Group">
													<polygon id="Path" points="14 20.7083333 6.79933333 24.4941667 8.17483333 16.4756667 2.3415 10.7975 10.3915 9.63083333 13.9918333 2.33566667 17.5921667 9.63083333 25.6421667 10.7975 19.8088333 16.4756667 21.1843333 24.4941667"></polygon>
												</g>
											</g>
										</g>
									</g>
								</g>
							</g>
						</svg>
						67K
					</span>
				</span>
				<span class="description">
					Angular - the core framework
				</span>
				<span class="tags">
					<span>mvvm</span>
					<span>browser</span>
					<span>framework</span>
				</span>
			</a>
		</li>
	</ul>
</div>

<div class="divider"></div>

<div class="component--cdn-detail">
	<h3>vue</h3>
	<ul class="form">
		<li>
			<label for="version">Version</label>
			<select name="version" id="version">
				<option value="3.0.2">3.0.2</option>
				<option value="3.0.1">3.0.1</option>
				<option value="3.0.0">3.0.0</option>
			</select>
		</li>
		<li>
			<label for="type">Asset Type</label>
			<select name="type" id="type">
				<option value="All">All</option>
				<option value="Javascript">Javascript</option>
				<option value="Sourcemaps">Sourcemaps</option>
			</select>
		</li>
	</ul>
	<ul class="items">
		<li>
			<div class="text">https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.cjs.js</div>
			<button class="copy-btn" data-copy="Copy URL" data-copied="Copied!" data-text="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.cjs.js"></button>
		</li>
		<li>
			<div class="text">https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.cjs.js</div>
			<button class="copy-btn" data-copy="Copy URL" data-copied="Copied!" data-text="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.cjs.js"></button>
		</li>
		<li>
			<div class="text">https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.cjs.js</div>
			<button class="copy-btn" data-copy="Copy URL" data-copied="Copied!" data-text="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.cjs.js"></button>
		</li>
	</ul>
	<div class="more-btn">
		<a href="#">Load more</a>
	</div>
</div>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background: #F1F6FF;
  padding: 50px;
}

.divider {
  height: 100px;
}

.component {
  &--cdn-list {
    width: 668px;

    ul {
      li {
        margin-bottom: 25px;

        &:last-child {
          margin-bottom: 0;
        }

        a {
          border-radius: 15px;
          display: flex;
          flex-direction: column;
          padding: 40px 50px 34px;
          background: #fff;
          box-shadow: 0 30px 75px -35px rgba(#23447E, .39);
          color: #181D39;
          transition: 300ms background-color, 300ms color;

          .title-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
          }

          .star {
            display: flex;
            align-items: center;
            font-size: 18px;

            svg {
              margin-right: 10px;
            }

            .icon-star {
              fill: #272E69;
              transition: 300ms fill;
            }
          }

          .title {
            font-size: 22px;
            font-weight: bold;

            span {
              font-size: 16px;
              opacity: .5;
            }
          }

          .description {
            max-width: 380px;
            font-size: 16px;
            line-height: 24px;
            margin-bottom: 20px;
          }

          .tags {
            display: flex;
            align-items: center;
            margin: 0 -5px;

            span {
              padding: 0 10px;
              height: 30px;
              border-radius: 30px;
              background: #F1F6FF;
              display: flex;
              align-items: center;
              font-size: 14px;
              line-height: 1;
              margin: 0 5px;
              transition: 300ms background-color;
            }
          }

          &:hover {
            background: #272E69;
            color: #fff;

            .tags span {
              background: #1A2261;
            }

            .star .icon-star {
              fill: #ffffff;
            }
          }
        }

        &.active a {
          background: #272E69;
          color: #fff;

          .tags span {
            background: #1A2261;
          }

          .star .icon-star {
            fill: #ffffff;
          }
        }
      }
    }
  }

  &--cdn-detail {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 30px 75px -35px rgba(#23447E, .39);
    padding: 50px;
    width: 668px;

    h3 {
      font-size: 26px;
      font-weight: bold;
      color: #181D39;
      margin-bottom: 20px;
    }

    .form {
      display: flex;
      margin-bottom: 32px;

      li {
        margin-right: 20px;

        &:last-child {
          margin-right: 0;
        }

        label {
          display: block;
          font-size: 16px;
          color: #181D39;
          margin-bottom: 10px;
        }

        select {
          min-width: 154px;
          border: 1px solid #CED7E9;
          height: 50px;
          padding: 0 15px;
          border-radius: 5px;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          cursor: pointer;
          background: url(../img/icon-arrow-down.svg) no-repeat calc(100% - 17px);
        }
      }
    }

    .items {
      li {
        margin-bottom: 5px;

        &:last-child {
          margin-bottom: 0;
        }

        height: 75px;
        border-radius: 5px;
        background-color: #F1F6FF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px 0 25px;

        .text {
          font-size: 16px;
          color: #181D39;
        }

        button {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          background: #fff url(../img/icon-copy.svg) no-repeat center;
          position: relative;

          &::before {
            content: attr(data-copy);
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, calc(-100% - 10px));
            background: #181D39;
            color: #ffffff;
            font-size: 14px;
            padding: 0 15px;
            height: 24px;
            white-space: nowrap;
            line-height: 24px;
            border-radius: 4px;
            display: none;
          }

          &::after {
            content: '';
            border: 4px solid transparent;
            border-top-color: #181D39;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, calc(-100% - 2px));
            display: none;
          }

          &.copied::before {
            content: attr(data-copied);
          }

          &:hover {
            &::before, &::after {
              display: block;
            }
          }
        }
      }
    }

    .more-btn {
      margin-top: 30px;

      a {
        display: inline-flex;
        height: 70px;
        padding: 0 35px;
        align-items: center;
        background-color: #272E69;
        color: #fff;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 15px 35px -5px rgba(#23447E, .39);
        transition: 300ms opacity;
        &:hover {
          opacity: .9;
        }
      }
    }
  }
}
let buttons = document.querySelectorAll('.copy-btn');

[...buttons].forEach(button => {
    button.addEventListener('click', (e) => {
        let input = document.createElement('input');
        input.setAttribute('value', e.target.dataset.text);
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        input.parentNode.removeChild(input);
        e.target.classList.add('copied');
        e.target.addEventListener('mouseleave', (e) => e.target.classList.remove('copied'));
    });
})