JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<style>
              .sn-url {
                  display: flex;
                  width: 100%;
                  margin: 2rem 0 2rem 0;
                  color: #718096;
                  border: 1px solid #edf2f7;
                  border-radius: 0.5rem;
                  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                  cursor: pointer;
                  text-decoration: none;
                }
                .sn-url:hover .sn-title {
                  color: #63b3ed;
                }
                .sn-image {
                  position: absolute;
                  top: 0;
                  left: 0;
                  object-fit: cover;
                  width: 100%;
                  height: 100%;
                  border-radius: 0 3px 3px 0;
                }
                .sn-left {
                  display: flex;
                  align-items: flex-start;
                  justify-content: flex-start;
                  flex: 1 1 0%;
                  flex-direction: column;
                  width: 100%;
                  min-width: 0;
                  padding: 1rem;
                  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                    "Noto Color Emoji";
                }
                .sn-title {
                  font-weight: 600;
                  text-align: left;
                  color: #1a202c;
                }

                .sn-description {
                  max-height: 48px;
                  word-break: break-word;
                  -webkit-box-orient: vertical;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  align-items: flex-start;
                  justify-content: flex-start;
                  margin-top: 0.75rem;
                  overflow-y: hidden;
                  line-height: 1.25rem;
  ...