A Failed Nextjs Conf Ticket Replica Using CSS

Today I registered nextjs conf and received a digital ticket. It is visually appealing.

nextjs conf ticket
Visual design is my weak point and I am starting to learn and use CSS more often. As I am getting confident and confortable to use CSS for building any kind of UI conponents. I’ve got a pulse to make a replica of this ticket using tailwind CSS. Unfortunately, I failed to do so eventually. However, this is still a fun journey to figure something out.

At first glance, all content inside the color frame is not that important, just stack of texts. The whole point of this replica is building a frame with the same colorful gradient outline with curves at the top and bottom.

With some quick CSS, I got this:

<div class="bg-black flex items-center justify-center h-screen">
  <div class="relative w-48 h-96 rounded-2xl transform scale-x-95 scale-y-90
  bg-gradient-to-br from-begincolor to-purple-700 flex items-center justify-center">
      <div class="absolute inset-0 w-48 h-96 transform scale-x-90 scale-y-95 rounded-xl ring-black ring-8 bg-black">
      <svg class="text-white fill-current" width="82" height="40" viewBox="0 0 148 90" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="transform:translateX(4%);shape-rendering:auto"><path d="M34.992 23.495h27.855v2.219H37.546v16.699h23.792v2.219H37.546v18.334h25.591v2.219H34.992v-41.69zm30.35 0h2.96l13.115 18.334 13.405-18.334L113.055.207 83.1 43.756l15.436 21.429H95.46L81.417 45.683 67.316 65.185h-3.018L79.85 43.756 65.343 23.495zm34.297 2.219v-2.219h31.742v2.219h-14.623v39.47h-2.554v-39.47H99.64zM.145 23.495h3.192l44.011 66.003L29.16 65.185 2.814 26.648l-.116 38.537H.145v-41.69zm130.98 38.801c-.523 0-.914-.405-.914-.928 0-.524.391-.929.913-.929.528 0 .913.405.913.929 0 .523-.385.928-.913.928zm2.508-2.443H135c.019.742.56 1.24 1.354 1.24.888 0 1.391-.535 1.391-1.539v-6.356h1.391v6.362c0 1.808-1.043 2.849-2.77 2.849-1.62 0-2.732-1.01-2.732-2.556zm7.322-.08h1.379c.118.853.95 1.395 2.149 1.395 1.117 0 1.937-.58 1.937-1.377 0-.685-.521-1.097-1.708-1.377l-1.155-.28c-1.62-.38-2.36-1.166-2.36-2.487 0-1.602 1.304-2.668 3.26-2.668 1.82 0 3.15 1.066 3.23 2.58h-1.354c-.13-.828-.85-1.346-1.894-1.346-1.1 0-1.832.53-1.832 1.34 0 .642.472 1.01 1.64 1.284l.987.243c1.838.43 2.596 1.178 2.596 2.53 0 1.72-1.33 2.799-3.453 2.799-1.987 0-3.323-1.029-3.422-2.637z" fill-rule="nonzero"></path></svg>

nextjs conf ticket
Apparently it is not perfect. I came to more problems than I thought:

  1. I used two divs stacked togther and their rounded corner cannot match.
  2. I couldn’t create gradient with 3 different colors.
  3. I can use two hald circle svg to intersect with top and bottom line to create curves, but their intersection points will be sharp and I cannot apply rounded corners to them.

Problem number 2 may be solved by adding another border-like div with different color, but that will be too much work for a simple color outline.

The beauty of front end development is that you can always check existing webpage source code to see how others' work is done. By checking the source code of this digital ticket, their solution is pretty straighforward: using svg for almost all content.

Lesson learned: CSS is powerful and almost all visual styles can be done by it. There might be alternative and easy way to achieve same result than using pure CSS, especially for my level of CSS skills. But it is fun to build something even I didn’t get what I expected in the end.